Color Contrast Checker
Use the WCAG relative luminance formula to check foreground and background contrast locally, determine the thresholds for regular body text and large text under AA/AAA, and export a report.
How to use the color contrast checker
Color values are used to calculate relative luminance and contrast only in the current browser; they are not uploaded or saved.
Enter two colors
Use the color picker or paste #RRGGBB values to set the foreground and background colors; the preview updates simultaneously.
Checking thresholds
Click Check to view the pass status for normal body text AA, normal body text AAA, and large text AA separately.
Copy check record
After passing, you can copy the report or download TXT, recording color values, ratios, and results for each threshold level.
Limitations and Notes
- The initial version accepts only #RGB or #RRGGBB without transparency; for translucent colors, you must first determine the actual composited background.
- 4.5:1 applies to regular body text AA, 3:1 applies to large text AA, and 7:1 is the reference threshold for regular body text AAA; also check font size, font weight, and non-text contrast.
- The tool only calculates the contrast of a pair of solid colors; it does not simulate gradients, images, shadows, font rendering, or complex backgrounds.
FAQ
What does 4.5:1 mean?
It is the minimum contrast threshold for regular body text under WCAG and AA; the threshold for large body text under AA is 3:1.
Why can’t transparent colors be judged directly?
The final colors of transparent foregrounds or backgrounds depend on the compositing order and the underlying image; determining the actual displayed solid colors first is more reliable.
Does passing the contrast check necessarily mean it is accessible?
Not necessarily. You should also check font size, font weight, states, focus, non-text components, image backgrounds, and how they appear on actual devices.