Loading color tools…
Loading color tools…
Loading color tools…
Check if your text and background colors meet WCAG accessibility standards. Live preview included.
Large Text Sample
This is what body text looks like at 14px with this color combination.
Small UI label text at 12px.
Contrast Ratio
5.17:1
On your background color, the most readable text color is:
Pick any color and instantly get its HEX, RGB, HSL, and CMYK values
Generate beautiful multi-color palettes from a single seed color
Create CSS linear, radial, and conic gradients with live preview and code output
Upload an image and extract its dominant colors as a palette
Enter the foreground color
Use the color picker or type a HEX code for your text color.
Enter the background color
Pick or type the background color the text will sit on.
Read the contrast ratio
The large ratio number shows how much contrast exists between the two colors.
Check WCAG compliance
Four pass/fail badges show whether your combination meets AA and AAA for both normal and large text.
Swap colors if needed
Click the swap button to reverse foreground and background and re-check.