Color Contrast Checker
Audit layered text, UI controls and palettes against WCAG 2.2, then apply a safer accessible shade.
This tool runs entirely in your browser. Your data is never uploaded, never stored, and never leaves your device.
Audits WCAG 2.2 text and non-text contrast through translucent foreground, component and page layers, then previews the real component and finds the nearest opaque foreground or background shade that can meet 3:1, 4.5:1 or 7:1.
How to use it
- 1Enter foreground and component colours as 3-, 4-, 6- or 8-digit hex, including alpha, plus the opaque page colour underneath; compositing follows foreground → component → page.
- 2Read full-precision pass/fail decisions for AA/AAA normal and large text, an icon inside the component, and the component boundary against the page.
- 3Set the actual font size and weight, inspect the layered live card and control, then copy or apply the closest foreground-only or background-only suggestion when one exists.
- 4Paste up to 16 palette colours to audit them against the same component background and copy the tab-separated report.
Example
- Input
- Foreground #00000080 on component #ffffff80 over page #000000
- Output
- Rendered #404040 on #808080 at 2.636:1; component versus page is 5.317:1. For a 4.5:1 target, the nearest foreground-only suggestion is opaque #171717 at 4.539:1.
The displayed ratios are rounded to three decimals but pass/fail uses the unrounded value. Large text means at least 24 px regular or about 18.67 px at weight 700 or above; 3:1 non-text applies only when the difference is needed to identify a control, state or meaningful graphic.
What happens to your data
Colours, palette and reports stay in this tab. Relative luminance uses the WCAG sRGB transfer curve and source-over alpha compositing, while suggestions exhaust every rounded sRGB colour on the current rendered colour's path toward black or white. Only flat hex colours are modelled: gradients, images, blend modes, shadows, colour management and changing content still require testing in the final interface, and the nearest compliant colour may require changing both sides rather than one.
Last updated September 2026
Check the contrast people actually see after transparent foreground and component colours are composited over an opaque page background. The result covers WCAG 2.2 text thresholds, large-text detection, non-text component checks, and the weakest pair in an optional colour palette.
The calculation is local and uses the full unrounded contrast ratio for pass or fail. A passing ratio is useful evidence, but it is not a complete accessibility review of typography, states, focus, colour meaning, motion, or real page imagery.
How it works
Enter 3-, 4-, 6-, or 8-digit hex colours. Four- and eight-digit forms include alpha, so the tool first composites foreground over component background and then over the opaque page colour before calculating relative luminance.
Normal text is checked at 4.5:1 for AA and 7:1 for AAA. Large text is checked at 3:1 and 4.5:1; the preview treats at least 24 px regular or 18.67 px at weight 700 or above as large. Meaningful icons and component boundaries are screened at 3:1 against their adjacent surface.
Suggested safer shades move the chosen colour toward black or white to reach 3:1, 4.5:1, or 7:1 where possible. They are practical neutral shade or tint suggestions, not a claim that hue, brand appearance, or every interface state is preserved.
Common use cases
- Audit text over translucent cards or overlays
- Check large headings separately from body copy
- Screen icon and input-boundary contrast
- Find the weakest pair in a palette of up to 16 colours
- Copy a compact contrast audit for design review
Frequently asked questions
Why does the checker ask for a page colour?＋
Transparent layers do not have a final colour until they are composited. The opaque page colour lets the tool calculate the rendered foreground and background instead of comparing incomplete alpha values.
When does text count as large?＋
For this WCAG check, large text is at least 24 px at regular weight, or at least 18.67 px at weight 700 or above. Smaller or lighter text uses the normal-text thresholds.
Does the 3:1 non-text result apply to every decorative border?＋
No. It is intended for visual information needed to identify controls, states, or meaningful graphics. Pure decoration and inactive elements need contextual review.
Are the suggested colours the only accessible choices?＋
No. They are nearby choices along a neutral path toward black or white. You can choose another hue or redesign the background, then check the resulting rendered pair again.
What does the palette audit report?＋
It checks every valid pair among up to 16 entered colours and identifies the weakest ratios. Invalid or omitted values are reported rather than silently treated as colours.
Does a passing ratio make the whole design accessible?＋
No. Contrast is one requirement. Test focus states, zoom, text spacing, keyboard use, colour-independent meaning, images, interaction states, and the actual rendered interface as well.
Are contrast colours sent to a server?＋
No. Compositing, ratio calculations, suggestions, and the palette audit run locally in your browser.
Used in these workflows
Related tools
Favicon Generator
Turn text, emoji or an image into a tested ICO and PNG favicon pack with a manifest and install tags.
Placeholder Image Generator
Create custom-size placeholder images with your own text and colors.
Crop Image
Trim a photo to the part you want, freehand or locked to a ratio like 1:1 or 16:9.
Meme Generator
Add fitted captions over a photo or in white caption bands, then download a private PNG meme.