♿ WCAG Contrast Ratio Checker — Accessibility Audit
Free WCAG 2.2 contrast ratio checker: test text and background contrast, AA/AAA score per font size, tips to fix low contrast for accessible websites.
Sample Text — Heading Size
Normal paragraph — sample at 16px to preview readability for body content.
7.0
Contrast Ratio✅
AA Normal✅
AA Large✅
AAA📚 What is WCAG?
Web Content Accessibility Guidelines (WCAG) from the W3C define standards for making websites usable for people with visual impairments. For color contrast, there are three levels:
- AA Normal Text: at least 4.5:1 — legal requirement in most jurisdictions.
- AA Large Text (≥18pt or ≥14pt bold): at least 3:1.
- AAA Normal Text: 7:1 — enhanced for users with low vision.
- AAA Large Text: 4.5:1.
Why this matters: Saudi Arabia's disability rights law mandates accessible government sites. Globally, 8% of men and 0.5% of women have some color blindness — good contrast makes your site usable by everyone.
❓ FAQ
How is contrast ratio calculated?
WCAG formula: (L1+0.05)/(L2+0.05) where L1 is the relative luminance of the lighter color and L2 of the darker. Ratio ranges from 1:1 (same color) to 21:1 (black on white).
What exactly is "large text"?
18pt (24px) regular or 14pt (18.66px) bold and above. Larger text needs less contrast because it is easier to read.
Is AAA legally required?
No. AA is the legal minimum in the EU and US. AAA is a recommendation, not mandatory, but preferred for government and critical-service sites.
How do I fix poor contrast?
Make text darker (lower Lightness in HSL) or background lighter. Avoid light grey on white — pick at least #555.