ACCESSIBILITY TOOLKIT
Good color should
read well, too.
Check text contrast, compare a palette, and export ready-to-use CSS tokens. Everything stays in this tab.
Contrast checkerAdjust the colors to see the result
The text and foreground elements
The surface behind the text
Large text: at least 24px or 18.66px bold
CONTRAST RATIO —
Normal text needs 4.5:1 for AALarge text needs 3:1
LIVE PREVIEW Foreground on background
A clearer interface
Readable by
everyone.
Thoughtful color makes every screen more comfortable to use.
Previewing16px body · 32px heading
✦
Change either color to see how the pair performs.
QUICK PALETTE CHECK
Try a whole color set.
Each swatch is checked against the current background.
Each color gets its own AA / AAA result.
01
What does the ratio mean?
Contrast is measured from 1:1 (no difference) to 21:1 (maximum). The higher the ratio, the easier text is to distinguish from its background.
02
What are AA and AAA?
WCAG levels describe minimum contrast. AA is the common target: 4.5:1 for normal text and 3:1 for large text. AAA is stricter: 7:1 and 4.5:1.
03
What does this check?
ContrastKit follows the WCAG relative-luminance formula for opaque sRGB colors. It is a useful check, not a substitute for reviewing an entire interface.