Color Contrast Checker
WorksheetsFreeNo sign-up
WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (level AA). Gray #767676 on white is 4.54:1, so it just passes AA for normal text. Enter two colors to check yours.
| WCAG 2 text | |
| AA normal text (4.5:1) | Pass |
| AA large text (3:1) | Pass |
| AAA normal text (7:1) | Fail |
| AAA large text (4.5:1) | Pass |
| Other | |
| Interface parts and graphics (3:1) | Pass |
| Luminance | |
| Text color | 0.1812 |
| Background | 1 |
Show steps
- Relative luminance of #767676 = 0.1812 and of #FFFFFF = 1.
- Contrast ratio = (lighter + 0.05) ÷ (darker + 0.05) = (1 + 0.05) ÷ (0.1812 + 0.05) = 4.542.
How to use the contrast checker
- Enter the text color and the background color as hex codes.
- Press Calculate. The preview shows your colors, and the table shows which WCAG levels pass.
- If a level fails, darken the darker color or lighten the lighter one and check again. The hex to RGB converter also shows each color’s contrast with white and black.
WCAG contrast requirements
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (24 px, or 18.7 px bold) | 3:1 | 4.5:1 |
| Icons, form borders, focus rings, charts | 3:1 | none |
Logos and purely decorative text have no contrast requirement.
How the ratio is calculated
- Change each RGB channel from 0–255 to 0–1 and linearize it: c ÷ 12.92 for small values, otherwise ((c + 0.055) ÷ 1.055)2.4.
- Relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B. Green counts the most because our eyes are most sensitive to it.
- Contrast ratio = (Llighter + 0.05) ÷ (Ldarker + 0.05).
The ratio runs from 1:1 (same color) to 21:1 (black on white).
Examples on white
| Text color | Ratio on #FFFFFF | Normal text AA |
|---|---|---|
| #000000 black | 21:1 | Pass |
| #595959 dark gray | 7:1 | Pass (also AAA) |
| #767676 gray | 4.54:1 | Pass |
| #777777 gray | 4.47:1 | Fail |
| #949494 light gray | 3.03:1 | Fail (large text only) |
Color contrast practice questions
Test yourself with 6 multiple-choice questions. Choose an answer and press Submit to see if you are right and why. Your score appears at the end.
Quiz complete
Frequently asked questions
What is a good color contrast ratio?
At least 4.5:1 for normal text and 3:1 for large text meets WCAG level AA. 7:1 for normal text meets the stricter AAA level.
How is contrast ratio calculated?
Find the relative luminance of each color, then divide (lighter + 0.05) by (darker + 0.05). Black on white gives the maximum, 21:1.
Does contrast matter for buttons and icons?
Yes. WCAG 2.1 asks for 3:1 between interface parts such as input borders, icons and focus indicators and the colors next to them.
Why does 4.49:1 fail?
WCAG thresholds are minimums and the ratio is not rounded up, so anything below 4.5:1 fails the normal-text AA rule.
Sources
- W3C: Understanding WCAG 2.2, Contrast (Minimum) 1.4.3
- W3C: WCAG 2.2 definition of relative luminance
- W3C: Understanding Non-text Contrast 1.4.11
Related calculators
More worksheets calculators
Related to This Article
More math articles
- Implementation
- The Best Grade 3 Math Book for Maryland Students
- Early Earth and the Origin of Life
- Domestic policy
- The Best Algebra 1 Book for Georgia Students
- Harnessing Properties: How to Add Three Fractions or Mixed Numbers with Ease
- Conclusions: What the Evidence Allows
- Circle Calculator (Area, Circumference, Radius & Diameter)
- Full-Length 7th Grade Common Core Math Practice Test-Answers and Explanations
- Leadership, Exchange, Cooperation, and Groupthink
What people say about "Color Contrast Checker: WCAG AA and AAA Contrast Ratio"?
No one replied yet.