๐Ÿงฐ UtlKit

WCAG Color Contrast Checker

Check color contrast ratios against WCAG 2.1 AA and AAA standards.

The quick brown fox jumps over the lazy dog
Aa Bb Cc 123 โ€” Sample Preview Text
Small text (14px / 11pt bold)
Contrast Ratio
21.00:1
โœ… Pass
WCAG AA (Normal) (min 4.5:1)
โœ… Pass
WCAG AA (Large) (min 3:1)
โœ… Pass
WCAG AAA (Normal) (min 7:1)
โœ… Pass
WCAG AAA (Large) (min 4.5:1)
๐Ÿ›

Report a Problem

Found a bug or have a suggestion? Help us improve this tool.

๐Ÿ“Š Data Summary (auto-filled)

Tool: contrast-checker ยท /tools/contrast-checker/

foreground: #000000

background: #FFFFFF

What is this tool?

WCAG color contrast checker evaluates the contrast ratio between foreground and background colors for accessibility compliance. Checks against WCAG 2.1/2.2 standards (AA and AAA levels) to ensure text is readable for all users including those with visual impairments.

How to use

  1. 1

    Set foreground color

    Pick or enter the text color.

  2. 2

    Set background color

    Pick or enter the background color.

  3. 3

    Check results

    See contrast ratio and WCAG AA/AAA pass/fail status.

Frequently Asked Questions

What contrast ratio do I need?

WCAG 2.1 Level AA requires 4.5:1 for normal text and 3:1 for large text (18px+ regular or 14px+ bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text.

Why is color contrast important?

Insufficient contrast makes text difficult to read for users with low vision, color blindness, or on bright screens. Good contrast improves readability for everyone and ensures legal accessibility compliance.

What should I do if the result seems wrong?

Double-check your input values. The tool uses standard formulas but edge cases may require manual verification.