WCAG Color Contrast Checker
Check WCAG 2.2 AA and AAA contrast ratios for text and UI graphics. Enter HEX, RGB, HSL, OKLCH or CSS color values, use the eyedropper, or open the color picker. Alpha transparency is composited automatically.
Color input format
Format:
Supported formats:
#fff, rgb(…), rgba(…), hsl(…), hsla(…), CSS color names such as rebeccapurple, oklch(65% 0.18 145), bare channel values such as 255,0,128 or 240,29%,14%.
Color values
Pick a color from the screen.
✓ HEX
LW—
Ambiguous format:
Pick a color from the screen.
✓ HEX
LW—
Ambiguous format:
Pick a color from the screen.
✓ HEX
LW—
Used only when the background color contains transparency. The underlay color represents the surface on which the background color is rendered in the target project.
Ambiguous format:
Color
H
S
L
L
C
R
G
B
A
Contrast preview
- Large text
- 26 px, Weight 600
- Small text
- 14 px, Weight 400
- Inline link
- 14 px, Weight 600, underlined
- Primary button
- 13 px, Weight 700, 2 px neutral-colored outline
- Secondary button
- 13 px, Weight 700, 2 px border
Each rendering shows the icon name, variant, weight, and size in its own tooltip. All icons use the current foreground color.
Accessible Text
The quick brown fox jumps over the lazy dog.
Primary Button
Secondary Button
Contrast results
—
Contrast ratio
AA – Small text ≥ 4.5:1
AA – Large text / Graphics≥ 3:1
AAA – Small text ≥ 7:1
AAA – Large text ≥ 4.5:1
Color suggestions
Suggestions