colors.to

Guide

WCAG color contrast for real interfaces

Check text, components, states, and palettes against WCAG 2.2 without claiming that a palette alone is compliant.

1

Text contrast is pair-specific

Normal text generally needs 4.5:1 contrast and large text needs 3:1. A color is not accessible by itself; the foreground, background, size, weight, and context determine the result.

2

Components also need distinction

Meaningful boundaries, focus indicators, icons, and graphical objects can require 3:1 contrast against adjacent colors. Test more than body copy.

3

Do not rely on color alone

Status and meaning should also be represented with text, icons, patterns, or position so the interface remains understandable when colors are difficult to distinguish.