♿

WCAG Contrast Checker

Check color contrast ratio for WCAG AA and AAA accessibility compliance.

Design Tools Runs locally No data sent
WCAG AA / AAA accessibility color
Foreground Color
Background Color
Preview
Normal text — The quick brown fox jumps over the lazy dog.
Large text (24px regular)
Large text (18.67px bold)
UI Component
—
Contrast Ratio
Level Normal Text Large Text UI Components
AA — — —
AAA — — N/A
WCAG 2.1 — AA requires ≥ 4.5:1 for normal text, ≥ 3:1 for large text and UI components. AAA requires ≥ 7:1 for normal text, ≥ 4.5:1 for large text. Large text = 18pt (24px) regular or 14pt bold (18.67px).

What is Contrast Checker?

Check color contrast ratio for WCAG AA and AAA accessibility compliance. Instantly verify foreground and background color combinations for normal text, large text, and UI components.

How to Use Contrast Checker

  1. Enter or pick the foreground text color.
  2. Enter or pick the background color behind it.
  3. Review the contrast ratio and WCAG pass or fail result instantly.
  4. Adjust either color until the combination meets your accessibility target.

Related Tools

🎨
Color Picker
Convert colors between HEX, RGB, HSL, and CMYK
 🌈
CSS Gradient Generator
Build CSS linear and radial gradients with live preview
 🎨
Color Palette Generator
Generate complementary, analogous and triadic color palettes
Understand Color Contrast ▾
Example
Input Checking medium grey text on a white background:
Output Result: passes AA for large text (≥ 3:1), but fails AA for normal text (requires 4.5:1). Darken the grey slightly to pass all AA levels.
Common Use Cases
  • Check button and link contrast before shipping UI updates
  • Validate text colors in brand systems and style guides
  • Review marketing graphics for readability
  • Test dark-on-light and light-on-dark combinations quickly
Frequently Asked Questions
What is the difference between AA and AAA contrast levels?

WCAG AA requires a 4.5:1 ratio for normal text and 3:1 for large text — the standard legal requirement. AAA requires 7:1 for normal text and 4.5:1 for large text, providing enhanced accessibility for users with severe low vision.

Does this check non-text contrast (icons, borders)?

Yes — WCAG 1.4.11 (Non-text Contrast) requires 3:1 for UI components and graphical elements. The AA UI Components result in the table covers this requirement.

My colors pass AA but fail AAA — do I need to fix them?

AAA compliance is not required for all content. WCAG AA is the standard legal requirement in most jurisdictions. Aim for AAA where possible, but AA is sufficient for legal compliance.

What counts as large text?

WCAG defines large text as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold text. Large text has a lower contrast requirement (3:1 for AA) because it is inherently easier to read.