Color Contrast Checker
Check foreground/background color contrast ratio against WCAG 2.1 accessibility guidelines. Instant AA/AAA results.
Large Text Preview (18pt bold)
Normal text preview β The quick brown fox jumps over the lazy dog.
About This Tool
The Color Contrast Checker computes the contrast ratio between a foreground (text) color and a background color using the WCAG 2.1 relative luminance formula. Contrast ratios range from 1:1 (identical colors) to 21:1 (black on white).
WCAG 2.1 defines two conformance levels: AA requires 4.5:1 for normal text and 3:1 for large text (β₯ 18pt or 14pt bold). AAA requires 7:1 for normal text and 4.5:1 for large text. Meeting at least AA is required for many legal and regulatory accessibility standards.
How to Use
- Pick the foreground (text) color and background color using the pickers or type hex codes.
- The preview shows how the text looks at normal and large sizes.
- The contrast ratio and WCAG pass/fail results update instantly.
- Use the sample pairs to explore common accessibility patterns.
Use Cases
UI designers verify button labels and body text meet WCAG standards. Frontend developers check text-on-background combinations in design systems. Accessibility auditors use contrast ratios as part of formal WCAG 2.1 AA audits. Product teams include contrast checks in their definition of done.
FAQ
- What counts as "large text"? β WCAG defines large text as at least 18pt (24px) regular, or 14pt (approximately 18.67px) bold.
- Does this handle transparency or rgba? β No, this tool works with solid hex colors only. For alpha-composited colors, flatten them against the background first.
- Which WCAG level should I target? β AA is the minimum recommended for most public websites. AAA provides better readability, especially for users with low vision.
- Is 4.5:1 always enough? β 4.5:1 satisfies WCAG AA, but users with more severe visual impairments may benefit from higher ratios (7:1 or more).