Pick a text color and a background color to see the contrast ratio and the WCAG criteria at once. It runs in your browser and nothing is sent to a server.
Type HEX (#3b82f6), rgb(), hsl() or a color name (blue). Click any swatch below to select that color.
Choose an image or drag and drop it here, or paste it with Ctrl+V.
Click or tap the image to select the color at that point. With the keyboard, move the pointer with the arrow keys and press Enter. The image stays in your browser and is never uploaded.
Large text Aa
Normal-size sample text. See here whether the contrast is enough.
| Criterion | Required | Result |
|---|
The semi-transparent color was blended over the background for the calculation.
The relative luminance of each color is calculated, then the ratio (luminance of the lighter color + 0.05) / (luminance of the darker color + 0.05) is found. The ratio ranges from 1:1 (same color) to 21:1 (black on white).
For WCAG 2 AA, normal text needs at least 4.5:1 and large text at least 3:1. For AAA, normal text needs 7:1 and large text 4.5:1. For non-text UI components (button borders, icons) at least 3:1 is recommended.
In WCAG, text of at least 18 point (about 24 pixels), or at least 14 point (about 18.7 pixels) when bold, counts as large.
If the text color is semi-transparent it is blended over the chosen background and the ratio is calculated for the resulting opaque color.