Color accessibility laboratory
Readability, measured.
Build with color that works for more people. Test real WCAG 2.2 contrast ratios, tune your palette, and see the result in context.
Color inputs
WCAG 2.2Adjust either color to begin testing.
Excellent contrast
Live sample
#17233C on #F5F7FBInclusive by design
Design for every reader.
Good contrast makes content easier to perceive in bright light, on different displays, and with low vision. It is a small check with a lasting benefit.
Clarity is a feature
Headings, body copy, buttons, and cards all share the colors you are testing.
The sample button is interactive. Try it with your own colors.
Curated pairs
Start with a tested combination, then make it your own.
Know the thresholds
Ratios range from 1:1 to 21:1. Large text means at least 24px, or 18.66px when bold.
The minimum for body copy and other standard-size text.
A stronger target for extended reading and small text.
The minimum for large text and meaningful interface graphics.