Contrast Checker
Test text and background colors for WCAG accessibility. Check contrast ratios for AA and AAA—ensure legibility for all users.
| Element | AA | AAA |
|---|---|---|
| Small text | ||
| Large text | ||
| UI element |
Live Card Preview
See how your colors feel in real designDecorative sample layout. Colors update from your foreground and background selections.
Contrast Checker Guide
WCAG contrast & readable color pairs
How contrast ratio works
Contrast ratio compares the relative luminance of two colors—the foreground (usually text or an icon) and the background. WCAG uses the formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 the darker. The result ranges from 1 : 1 (no contrast) to about 21 : 1 (black on white).
WCAG AA & AAA
The Web Content Accessibility Guidelines define minimum ratios so text and important UI remain legible for people with low vision or in harsh lighting. AA is the usual legal and industry baseline; AAA is stricter “enhanced” conformance.
| Element | AA minimum | AAA (enhanced) |
|---|---|---|
| Normal text (under large-text thresholds) | 4.5 : 1 | 7 : 1 |
| Large text (≥ 18 pt regular or 14 pt bold) | 3 : 1 | 4.5 : 1 |
| UI components & graphical objects | 3 : 1 | — |
The results table in the tool above maps directly to these rows—check marks mean the pair passes for that row at AA or AAA.
Normal vs large text
“Large” text gets a lower required ratio because bigger glyphs are easier to read. WCAG treats text as large when it is at least 18 pt (about 24 CSS px at default scaling) at regular weight, or at least 14 pt bold (~18.67 CSS px bold).
UI components & graphics
Contrast rules also apply to parts of the interface that aren’t body text: focus rings, form field borders, icons that convey meaning, and essential parts of charts or diagrams. WCAG 2.1 uses a 3 : 1 minimum against adjacent colors for many of these non-text cases.
Pure decoration, inactive “disabled” controls, and logos may have exceptions—always check the official criteria for your exact pattern.
Using this checker
Set foreground to your text or icon color and background to the surface behind it. Type a #RRGGBB hex, use the native color picker, or drag the lightness sliders to tune a color while watching the ratio update.
Swap exchanges foreground and background—useful when you pasted colors in the wrong fields. The sample product card on wide screens is a decorative preview only; your WCAG results come from the numeric ratio and pass/fail table.
Beyond the numbers
Good contrast is necessary but not sufficient. Don’t rely on color alone to communicate state (pair hue with text, icons, or patterns), ensure keyboard focus is visible, and test with real users when you can.
Future standards may lean on newer models such as APCA (part of WCAG 3 drafts). WCAG 2.x ratios remain the practical requirement for most compliance work today—this tool follows that model.