Accessibility
WCAG contrast checker & auto-fixer
Check your text and background colors against WCAG AA and AAA standards. If they fail, instantly get the closest passing color — no guesswork needed.
Text color
RGB(107, 114, 128) — Luminance: 0.1672
Background color
RGB(255, 255, 255) — Luminance: 1.0000
Contrast ratio
4.83:1
AA Normal
4.5:1
AA Large
3:1
AAA Normal
7:1
AAA Large
4.5:1
Live preview
Large text heading
Large text body (18pt / 14pt bold)
Normal text body at 12px — this is what most of your paragraph content looks like.
Small text at 10px — captions, footnotes, and fine print.
How WCAG contrast ratios work
WCAG (Web Content Accessibility Guidelines) defines contrast ratios to ensure text is readable by people with visual impairments, including low vision and color blindness.
The contrast ratio is calculated from the relative luminance of two colors. Luminance is a perceptual measure of brightness — it accounts for the fact that the human eye is more sensitive to green light than red or blue. Pure white has a luminance of 1, and pure black has a luminance of 0.
The formula is: ratio = (L_light + 0.05) / (L_dark + 0.05). The maximum possible ratio is 21:1 (black on white).
WCAG AA vs AAA requirements
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
Large text is defined as at least 18pt (24px) regular weight, or 14pt (18.66px) bold.
Common mistakes
- Light gray text on white — The most common failure. Gray text (#9ca3af) on white (#ffffff) gives only 3.1:1, failing AA for normal text.
- Colored text on colored backgrounds— Red on blue, green on orange — these often fail even if they “look” readable to someone with normal vision.
- Relying on color alone — WCAG also requires that color is not the only visual means of conveying information (1.4.1). Always pair color with text, icons, or patterns.
- Placeholder text too faint — Form placeholders must also meet contrast requirements when they convey meaningful information.
Frequently asked questions
- What is the WCAG contrast ratio requirement?
- WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (at least 18pt or 14pt bold) at Level AA. Level AAA requires 7:1 for normal text and 4.5:1 for large text.
- What counts as large text under WCAG?
- Large text is defined as at least 18pt (24px) or 14pt (18.66px) bold. All text below these sizes is considered normal text and must meet the higher contrast ratio.
- How is the contrast ratio calculated?
- The contrast ratio is calculated using the WCAG relative luminance formula. First, each color's sRGB value is converted to a linear value, then the relative luminance is computed as 0.2126R + 0.7152G + 0.0722B. The ratio is (lighter + 0.05) / (darker + 0.05).
- What does the auto-fixer do?
- When your colors fail WCAG requirements, the auto-fixer calculates the closest color that passes. It adjusts the lightness in HSL color space while preserving the original hue and saturation, ensuring the suggested color is as visually similar as possible to your original choice.
- Is this tool free to use?
- Yes, this tool is 100% free. All calculations happen in your browser — no data is sent to any server, and no account is needed.
- Does WCAG apply to my website?
- Yes. In the US, the ADA (Americans with Disabilities Act) has been interpreted by courts to require web accessibility. In the EU, the European Accessibility Act mandates WCAG 2.1 AA compliance for most digital products by 2025. Non-compliance exposes organizations to legal risk.