WCAG Color Contrast Checker
Check text and background colors against WCAG AA and AAA contrast.
Private ● Runs entirely in your browser Your text never leaves your device.No account required.No data uploaded.Nothing stored unless you choose to save it.Add to Home Screen
Install WCAG Color Contrast Checker so it opens like an app and works offline.
- Open Chrome’s menu (⋮, top-right).
- Tap Install app or Add to Home screen.
- Confirm — the icon appears on your home screen.
- Tap the Share button in Safari’s toolbar.
- Choose Add to Home Screen.
- Tap Add.
- AANormal
- AALarge
- AAANormal
- AAALarge
Enter two colors to check contrast.
Common Questions
What contrast ratio do I need to pass WCAG?
For normal body text you need a ratio of at least 4.5 to 1 to pass AA, and 7 to 1 to pass the stricter AAA level. Large text (about 24px, or 18.66px when bold) has a lower bar: 3 to 1 for AA and 4.5 to 1 for AAA. This checker shows all four results at once so you can see exactly which pass.
What counts as large text?
WCAG defines large text as at least 18 point (roughly 24px) for regular weight, or at least 14 point (roughly 18.66px) when bold. Large text is easier to read, so it is allowed a lower contrast ratio. If your text is smaller than that, use the normal-text thresholds.
How is the contrast ratio calculated?
The ratio compares the relative luminance of the two colors using the WCAG formula: (lighter + 0.05) divided by (darker + 0.05). Relative luminance weights green most and blue least, matching how the human eye responds. The result ranges from 1 to 1 (identical colors) up to 21 to 1 (pure black on pure white).
My colors fail. How do I fix them?
When the text color fails AA, use the Suggest an accessible text color button. It keeps your hue and saturation but adjusts the lightness to the nearest value that reaches a 4.5 to 1 ratio on your background. You can also darken the text or lighten the background manually and watch the ratio update live.
Does contrast checking replace real accessibility testing?
No. Contrast is one important part of accessibility, but readable color does not guarantee a usable interface. Also test keyboard navigation, focus states, screen-reader labels, and non-color ways of conveying meaning. Treat a passing ratio as necessary, not sufficient.