Color Contrast Checker
Check if your text and background colors meet WCAG accessibility standards. AA and AAA compliance testing.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.25);About
Web Content Accessibility Guidelines (WCAG) require minimum contrast ratios between text and background colors to ensure readability for people with visual impairments. WCAG 2.1 Level AA requires a 4.5:1 ratio for normal text and 3:1 for large text (18px+ bold or 24px+ regular). Level AAA requires 7:1 for normal text and 4.5:1 for large text. This tool calculates the exact contrast ratio and reports pass/fail for each level, helping you choose accessible color combinations before writing any code.
FAQ
What contrast ratio should I aim for?
For body text, aim for at least 4.5:1 (WCAG AA). For headings and large text, 3:1 is the minimum. For the best accessibility, target 7:1 (WCAG AAA) which ensures readability for users with moderate visual impairments.
Do these rules apply to colored backgrounds?
Yes. The contrast ratio is calculated between the text color and the background directly behind it. Semi-transparent backgrounds, gradients, and images all affect effective contrast and should be checked at their lowest-contrast point.