Color Contrast Checker

Check color contrast ratios for WCAG accessibility compliance. Test foreground and background colors for AA and AAA conformance levels.

Large Text Preview (18pt+)

This is how normal body text will appear with these colors.

Contrast Ratio

✓ AAA
Normal Text
(<18pt / <14pt bold)
✓ AAA
Large Text
(≥18pt / ≥14pt bold)
✓ AA
UI Components
(icons, borders)
AAA: ExcellentAA: GoodFail: Insufficient
WCAG 2.1 requires 4.5:1 contrast for normal text (AA) and 7:1 for enhanced (AAA). Large text (18pt+ or 14pt bold) needs 3:1 for AA and 4.5:1 for AAA. UI components need 3:1 minimum.

How to Use This Tool

  1. 1

    Enter foreground color

    Type a HEX color code or use the color picker to select your text or icon color.

  2. 2

    Enter background color

    Set the background color using HEX code or color picker. Common backgrounds are #FFFFFF (white) and #000000 (black).

  3. 3

    Check WCAG compliance

    View the contrast ratio and see if your colors pass AA and AAA standards for normal text, large text, and UI components.

  4. 4

    Adjust for accessibility

    If colors fail, try darkening the text or lightening the background until you achieve AA or AAA compliance.

Frequently Asked Questions

What contrast ratio do I need?
For WCAG AA compliance: 4.5:1 for normal text, 3:1 for large text (18pt+). For AAA (enhanced): 7:1 for normal text, 4.5:1 for large text. UI components and icons need 3:1 minimum.
What counts as large text?
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (18.5px) or larger for bold text. Large text has lower contrast requirements.
Is AA or AAA better?
AAA provides better accessibility but can be harder to achieve with branded colors. AA is the minimum legal requirement for most contexts. Aim for AAA when possible, especially for body text.
Does this work for colorblind users?
Contrast ratio helps all users, including those with low vision. However, colorblind users may also need you to avoid color-only indicators. Use patterns, icons, or text labels alongside color.