Color Contrast

These tools deal with text and background colors. Look up the required ratio, find the nearest color that reaches a target ratio, check every pair in a palette, or measure colors picked from an image.

Tools in this group

• Color Contrast Accessibility Guidelines (WCAG) — Pick what the color is used for and the level you aim for to see the required contrast ratio, the WCAG rule and its exceptions.
• Color Contrast Finder — Give your text and background colors and a target ratio; the finder suggests the nearest colors that pass, keeping the hue.
• Color Palette Contrast Checker — Paste your palette, one color per line, to see every text-on-background pair with its ratio and WCAG level.
• Focus Indicator Checker — Enter the focus ring color, thickness and component size to check its contrast and area against WCAG, then copy the CSS.
• Hex to HSL Converter — Type or pick a color to get its HEX, RGB and HSL values, lighten or darken it by lightness points and copy the result.
• Image Contrast Checker (Text on Images) — Open an image, then click the text and background colors or drag a box over text to measure its contrast against WCAG.