Contrast Checker
Enter a foreground (text) color and a background color to check the WCAG contrast ratio. The tool shows whether the pair passes AA and AAA requirements for both normal and large text, with a live preview.
Contrast Ratio: —
AA Normal —
AA Large —
AAA Normal —
AAA Large —
The quick brown fox jumps over the lazy dog.
Large text preview
WCAG Contrast Requirements
The Web Content Accessibility Guidelines define two conformance levels:
- AA: Contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold).
- AAA: Contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
The contrast ratio is calculated from the relative luminance of each color using the formula defined in WCAG 2.x: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter and L2 the darker luminance.
Tips for Meeting Contrast
If your pair doesn't pass, try darkening the text color or lightening the background (or vice versa). Use the Accessible Color Pair Generator to find alternatives that share the same hue.