Check any colour pair against WCAG AA and AAA, and get a suggested fix when it fails.
Large text means 18pt, which is about 24px, or 14pt bold, which is about 18.66px bold.
Large text sample
Normal body text at a typical size, which is the hardest case to pass.
Normal text
Large text (18pt or 14pt bold)
Normal text
Large text (18pt or 14pt bold)
Icons, borders and form controls
Use the swatch or type a hex value. Foreground is the text or icon, background is what sits behind it. Swap them if you entered them the other way round.
The ratio runs from 1 to 21. The badges tell you which WCAG levels pass for normal text, large text and non-text elements such as icons and input borders.
When the pair misses AA, the tool works out the nearest lightness of your own colour that would pass, so you keep the hue instead of reaching for a generic grey.
WCAG AA asks for 4.5 to 1 for normal text and 3 to 1 for large text. AAA raises those to 7 and 4.5. Non-text elements such as icons and input borders need 3 to 1 under AA.
18pt, roughly 24 pixels, or 14pt bold, roughly 18.66 pixels bold. Below that it counts as normal text and has to clear the higher bar.
That is the maximum the formula can produce. The ratio compares relative luminance, and black and white are the two extremes, so nothing can score higher.
No. The formula always divides the lighter luminance by the darker, so the pair scores the same either way. The swap button is there for convenience, not because it changes the result.
It is the level most accessibility policies require, and it is a reasonable minimum. AAA is worth aiming for on body text in content-heavy pages, where people read for a long time.
No. Contrast is one requirement among several. Colour should also never be the only way information is conveyed, and focus states need their own visible contrast.
It keeps your hue and saturation and moves lightness in whichever direction the background calls for, stopping at the first value that clears 4.5. That keeps the fix on-brand rather than replacing your colour.
Yes, completely free with no sign-up.
Convert colors between HEX, RGB, and HSL formats with live preview and CSS output.
Open ToolTurn one hex value into a full 50 to 950 scale for Tailwind v4, v3 or CSS variables.
Open ToolPull the dominant colours out of an image with hex, HSL and the share of each.
Open Tool