Copied!

Accessibility Hub

Everything you need to make your colors accessible. WCAG guidelines, contrast checker, and best practices for inclusive design.

Contrast Checker

The quick brown fox jumps over the lazy dog
Smaller text for testing legibility at different sizes
Contrast Ratio
17.40:1
Normal Text
WCAG AA
Pass
WCAG AAA
Pass
Large Text
WCAG AA
Pass
WCAG AAA
Pass

WCAG Guidelines

WCAG AA

Level AA Standard

The minimum recommended standard for web accessibility. Addresses the most common barriers for users with disabilities.

  • 4.5:1 for normal text (below 24px, or below 18.66px bold)
  • 3:1 for large text (24px and up, or 18.66px bold and up)
  • 3:1 for UI components and graphics
WCAG AAA

Level AAA Enhanced

The highest level of accessibility. Recommended for sites serving users with significant visual impairments.

  • 7:1 for normal text (below 24px, or below 18.66px bold)
  • 4.5:1 for large text (24px and up, or 18.66px bold and up)
  • Ideal for healthcare, education, and government sites

Accessible Palette Resources

WCAG Contrast Requirements

What AA and AAA actually require for text and UI components, and what counts as large text.

Read the guide

Contrast Checker

Check any text and background pair and get the exact ratio, AA/AAA results and a suggested passing color.

Open checker

Color Blindness Simulator

Preview any palette as people with protanopia, deuteranopia, tritanopia or achromatopsia would see it.

Open simulator

Dark Mode Best Practices

Learn how to maintain WCAG compliance in dark mode interfaces with proper contrast ratios.

Read article

CSS Color Contrast

How the new CSS contrast-color() function picks black or white text automatically, with fallbacks.

View guide

Accessibility Checklist

A checklist for auditing your color choices against the WCAG 2.2 success criteria.

View checklist