Both colors are converted from sRGB to linear light using WCAG's own piecewise formula, then combined into a relative luminance value with the standard 0.2126/0.7152/0.0722 weights for red, green, and blue. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), with L1 always the lighter of the two luminances — the same calculation every accessibility auditing tool uses, so the number here will match what a browser extension or Lighthouse reports for the same pair. Everything runs in your browser; nothing you enter is sent anywhere.
Color Contrast Checker
Check whether two colors meet WCAG contrast requirements for text and UI components. Runs entirely in your browser — enter hex or rgb() values and see the exact ratio plus a pass/fail table.
Large sample text
Normal-size sample text for reading contrast at everyday sizes.
17.74:1
Contrast ratio
WCAG criteria
AA — normal text
Needs 4.5:1 or higher
AA — large text (18pt+/14pt+ bold)
Needs 3:1 or higher
AAA — normal text
Needs 7:1 or higher
AAA — large text (18pt+/14pt+ bold)
Needs 4.5:1 or higher
AA — UI components & graphical objects
Needs 3:1 or higher
How this checker works
Frequently asked questions
What's the difference between AA and AAA?
AA is the level most accessibility laws and standards (including ADA-related requirements and EN 301 549) require as a baseline — 4.5:1 for normal text, 3:1 for large text. AAA is the stricter, aspirational level (7:1 and 4.5:1) that WCAG describes as ideal but doesn't mandate site-wide, since some color combinations that meet AA can't realistically reach AAA without breaking a brand's palette.
What counts as "large text" for the 3:1 threshold?
WCAG defines large text as 18pt (24px) regular weight or larger, or 14pt (18.66px) bold or larger. Anything smaller than that is judged against the stricter normal-text thresholds (4.5:1 for AA, 7:1 for AAA), because small text is harder to read at low contrast than large text is.
What's the UI components criterion for?
WCAG 2.1's Success Criterion 1.4.11 (Non-text Contrast) requires a 3:1 ratio for the visual boundaries of interactive components — button borders, form field outlines, focus indicators — and for graphical objects like icons and chart segments that carry meaning. It's easy to forget because it isn't about text at all, but low-contrast buttons and icons are just as much an accessibility failure.
Does it matter which color I put in foreground vs background?
Not for the ratio itself — the WCAG formula always compares the lighter color's luminance to the darker one's, so swapping foreground and background gives the exact same number. It matters for the preview, though, since that's rendered as real text-on-background so you can see how the pair actually reads.
Can I use rgb() values instead of hex?
Yes — both fields accept rgb(r, g, b) and rgba(r, g, b, a) alongside 3- and 6-digit hex, with or without the leading #. An alpha channel in rgba() is accepted but not used in the math, since WCAG's contrast formula assumes both colors are fully opaque against their final rendered background.