Contrast Checker
WCAG AA/AAA contrast ratio for any two colors, with live preview.
The quick brown fox jumps over the lazy dog. 1234567890.
Small caption text at 13.6px is the toughest case for legibility.
Large bold headings sparkle.
Subhead at 20px regular.
How to use
- Pick or paste the foreground and background colours.
- The contrast ratio appears instantly along with WCAG pass or fail badges.
- Inspect the preview cards to see body, headline and button cases.
- Hit "Nudge text to AA" to push the foreground until it passes AA normal text.
- Copy the report to include in a design ticket or PR description.
Frequently asked questions
What ratios are required by WCAG?
AA requires 4.5:1 for normal text and 3:1 for large text. AAA raises the bar to 7:1 for normal text and 4.5:1 for large text. UI components and graphics need at least 3:1 for AA.
What counts as large text?
Bold text at 14pt (about 18.66 CSS pixels) or larger, or any text at 18pt (about 24 CSS pixels) or larger.
Why does dark mode fail my contrast?
Dark themes can have lower perceived contrast than expected, especially with grey text on a near-black background. Lighten foreground colors or deepen the background until the ratio reaches at least 4.5:1.
Is APCA contrast supported?
WCAG 2 ratio is the default because it is the current legal standard. APCA, the proposed successor in WCAG 3, will be added in a future update.
What the contrast ratio number actually means
WCAG contrast is the ratio between the relative luminance of the lighter and darker colour, ranging from 1:1 (identical) to 21:1 (pure black on pure white). Luminance is not a simple average of RGB channels; green contributes most, blue least, mirroring human eye sensitivity. That is why a mid-grey on yellow can pass while a seemingly stronger blue on red fails: the formula measures perceived brightness difference, not how different the hues look.
The thresholds, in plain terms
- 4.5:1 is AA for normal body text. This is the baseline for any text users must read.
- 3:1 is AA for large text (18 pt regular or 14 pt bold and above) and for UI components like input borders and icons.
- 7:1 is AAA for body text. Aim for it in long-form reading surfaces and anything used by older audiences.
- Decorative elements and disabled controls are exempt, but placeholder text is not, and it fails on most websites.
Failures designers make repeatedly
Light grey text on white (#999 on #FFF is 2.8:1), white text on brand orange, and text over photos without an overlay are the three classic failures. Dark mode introduces its own trap: pure white text on pure black (21:1) is technically maximal but causes halation for astigmatic readers, so 15:1 to 17:1 with an off-white like #E8E8E8 is the more comfortable target. Contrast is also the cheapest accessibility win available: unlike screen reader support it requires no code, only a colour decision made early.
Fixing a failing pair without losing the design
When a combination fails, you rarely need a new palette... you need one of three small moves. Darken the text (or lighten it, on dark backgrounds): each step of roughly 10% lightness adds meaningfully to the ratio while staying recognisably the same colour. Adjust the background instead, which often touches fewer components. Or change the role: a colour that fails for body text may pass for large headings or non-text elements at 3:1, so demote it rather than delete it. Re-test after each move; perception is a poor predictor of the computed ratio, which is the entire reason the checker exists.
Advertisement