How to use Color / contrast
- 1. Enter foreground and background. HEX or rgb().
- 2. Read the ratio. AA/AAA labels for normal and large text.
- 3. Copy conversions. hex/rgb/hsl.
- 4. Design in the preview. Not a full palette generator.
About this tool
Contrast is the accessibility check that still gets skipped. Computing it locally from two colors is cheaper than a screenshot into a random checker that uploads the image.
WCAG 2
4.5:1 normal text, 3:1 large, 7:1 AAA. APCA is not this formula.
sRGB
Channels are linearized with the sRGB transfer curve.
Code examples
hex
#111111 on #ffffff