Accessibility Utility
Color Contrast Checker
Compare two sRGB colors using the WCAG contrast-ratio formula and check common AA text thresholds.
Check foreground and background
WCAG calculation used
The W3C defines sRGB relative luminance using linearized red, green, and blue components, then defines contrast ratio as (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the lighter relative luminance and L2 is the darker.
For WCAG 2.x Success Criterion 1.4.3, the Level AA minimum is 4.5:1 for normal text and 3:1 for large-scale text. This page reports those two threshold checks.
Worked examples
- Black (#000000) on white (#ffffff) produces the maximum contrast ratio of 21:1.
- Identical foreground and background colors produce 1:1.
Limitations
A passing pair does not establish full WCAG conformance. Typography, font size and weight, opacity, gradients, images, focus indicators, component states, non-text contrast, user settings, and surrounding design can also matter. This tool evaluates only the two selected solid sRGB colors.
Privacy
The color values are processed locally in the browser.
Authoritative references
- W3C WAI: Understanding Contrast (Minimum)
- W3C WAI: contrast ratio and relative luminance definitions
Common questions
Does 4.5:1 mean the whole page is accessible?
No. It only addresses one text-contrast threshold for the selected color pair.
Why is large text shown separately?
WCAG’s minimum text-contrast criterion uses a lower 3:1 threshold for qualifying large-scale text.
For organizations
If you operate a website, learning resource, agency project, or developer platform and want to evaluate this utility as a maintained embed, see agency use cases and developer-platform use cases. PTH Embed is currently a controlled beta with selective qualified tools and aggregate usage metering.