Contrast checker
WCAG 2.1 ratios. Normal text needs 4.5:1 to pass AA, large text needs 3:1.
Sample heading
Body copy at 14 pixels, which is where most contrast problems actually show up. Read this line and trust your eyes as much as the number.
Ratio
—
Normal text
—
Large text
—
UI & icons
—
Tints and shades
Ten steps from near-white to near-black, built around one colour. Click any swatch to copy it.
Format converter
Type any of these and the rest follow: hex, rgb(), hsl(), or a plain CSS colour name.
| Hex | — |
| RGB | — |
| HSL | — |
| Luminance | — |
| On white | — |
| On black | — |