About this tool
Pick a text color and a background color to get the exact WCAG contrast ratio plus pass/fail results for the four standard thresholds: AA and AAA, for normal and large text. A live sample shows the pairing in real type.
The Web Content Accessibility Guidelines require a contrast ratio of at least 4.5:1 for normal text (AA) and 7:1 for the stricter AAA level; large text — 18pt, or 14pt bold — passes AA at 3:1. Low-contrast gray-on-white text is the most widespread accessibility failure on the web, and it excludes not just users with low vision but anyone reading on a phone in sunlight.
How to use it
- Set the foreground (text) color and background color.
- Read the contrast ratio and the four pass/fail verdicts.
- Adjust lightness until you clear at least AA for your text size.
Frequently asked questions
How is the contrast ratio calculated?
From the relative luminance of the two colors using the WCAG formula: (L1 + 0.05) ÷ (L2 + 0.05), ranging from 1:1 (identical) to 21:1 (black on white).
What counts as large text?
18pt (about 24px) regular weight, or 14pt (about 18.7px) bold. Large text only needs a 3:1 ratio for AA compliance.
Do these rules apply to logos and icons?
Logos and purely decorative elements are exempt. Meaningful icons and UI components need 3:1 against adjacent colors under WCAG 2.1.