About This Tool
WCAG Contrast Checker calculates the contrast between two opaque colors, previews actual text, and checks AA and AAA separately for normal and large text. This tool checks color contrast only; it is not a complete accessibility evaluation of a website.
How to Use
- Enter foreground and background colors as opaque 3- or 6-digit HEX values.
- See how the text looks on the selected background.
- Check the contrast ratio and four Pass/Fail results.
- Adjust the colors, check again, and copy the results.
Examples
- #000000 and #ffffff → 21:1.
- Two identical colors → 1:1.
- #777777 and #ffffff → about 4.48:1, below the AA normal-text requirement of 4.5:1.
How the Calculation Works
First divide each sRGB channel by 255. If c ≤ 0.04045, the linear channel is c / 12.92; otherwise it is ((c + 0.055) / 1.055)^2.4. Relative luminance L = 0.2126R + 0.7152G + 0.0722B. Contrast = (lighter L + 0.05) / (darker L + 0.05). Pass/Fail uses the full, unrounded result; rounding is applied only for display.
WCAG 2.x Text Contrast Thresholds
- AA normal text: at least 4.5:1.
- AA large text: at least 3:1.
- AAA normal text: at least 7:1.
- AAA large text: at least 4.5:1.
Large text generally means at least 18pt (24 CSS px), or bold text of at least 14pt (about 18.67 CSS px). Threshold checks always use the unrounded contrast ratio.
Common Uses
- Check button text against its background color.
- Check contrast for body text and headings in a theme.
- Adjust designs to meet WCAG text contrast thresholds.
Privacy
All input processing, calculations, CSS generation, and previews run in your browser. Your content is never uploaded. No backend, database, online API, or third-party CDN is used, and your input is not saved automatically.
FAQ
What is WCAG contrast?
It measures the difference between foreground and background colors using relative luminance, with ratios from 1:1 to 21:1.
What does 4.5:1 mean?
It is the minimum contrast ratio for WCAG AA normal text. A result must be at least 4.5 to pass.
How do AA and AAA differ?
For text contrast, AAA is stricter than AA: it requires 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Generally, text of at least 18pt, or bold text of at least 14pt, equivalent to about 24px and 18.67px respectively.
Can I check transparent colors or gradients?
This page handles opaque solid colors only. Transparent colors must first be composited against the actual background. For gradients, check the lowest contrast wherever text appears.