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
12.63: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 (under 24px or 18px bold)
  • 3:1 for large text (24px+ or 18px+ bold)
  • 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 (under 24px or 18px bold)
  • 4.5:1 for large text (24px+ or 18px+ bold)
  • Ideal for healthcare, education, and government sites

Accessible Palette Resources

AA Compliant Palettes

Browse palettes that meet WCAG AA standards for normal text. Perfect for most web and app projects.

View palettes

AAA Compliant Palettes

High-contrast palettes that meet WCAG AAA standards. Ideal for accessibility-first projects.

View palettes

Color Blind Safe

Palettes optimized for deuteranopia, protanopia, and tritanopia. Includes simulation tools.

View palettes

Dark Mode Best Practices

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

Read article

CSS Color Contrast

Technical guide to implementing accessible colors in CSS with variables and fallbacks.

View guide

Accessibility Checklist

Complete checklist for auditing your color choices against WCAG 2.1 success criteria.

Download PDF