カラーコントラストチェック

This is a WCAG color contrast checker that shows the exact contrast ratio between a text color and a background color, and whether it meets the AA and AAA accessibility levels. Pick colors with the swatch or by hex code and see a live preview.

Adjust the two colors until the badges pass the level you need, and the result updates instantly as you go.

Text that is too close in lightness to its background is hard or impossible to read, especially for people with low vision or color vision deficiencies, or for anyone on a phone in bright sunlight. Enough contrast keeps your content legible for everyone.

The Web Content Accessibility Guidelines (WCAG) set the standard. AA, the level most sites aim for and that many accessibility laws reference, requires a ratio of 4.5:1 for normal text and 3:1 for large text. AAA is stricter at 7:1 and 4.5:1.

Large text gets a lower threshold because bigger letters stay legible at less contrast. It counts as large at roughly 24px (18pt), or 18.66px (14pt) when bold.

The ratio comes from the relative luminance of the two colors using the official WCAG formula, producing a value from 1:1 (no contrast, identical colors) up to 21:1 (black on white).

Everything is calculated in your browser, so it is instant and private. Nothing you pick is uploaded anywhere.