Contrast Checker
Pick a foreground and background color to see the live contrast ratio and whether it passes the WCAG AA and AAA accessibility guidelines for normal and large text. A live preview shows the combination in practice.
How it works
Pick your foreground and background colors with the pickers or by typing a hex code. The contrast ratio is calculated from the relative luminance of both colors and compared against the WCAG thresholds for normal text (4.5:1 for AA, 7:1 for AAA) and large text (3:1 for AA, 4.5:1 for AAA).
Tip
If a combination fails, try darkening the darker color or lightening the lighter one — even small adjustments can push the ratio past the next threshold.
What counts as "large text"?
WCAG defines large text as at least 18pt (24px), or 14pt (~18.5px) bold — headings and similar prominent text can use the more lenient large-text thresholds.
More tools in this category
Exposure Calculator
Find equivalent camera exposures across aperture, shutter speed, and ISO.
Aspect Ratio Calculator
Scale an image or video proportionally and find its simplified ratio.
CSS Gradient Generator
Design a linear or radial CSS gradient and copy the generated code.
Color Palette Generator
Turn any base color into complementary, analogous, and triadic color palettes.
Color Format Converter
Convert any color between HEX, RGB, HSL, and CMYK instantly, with one-click copy for each format.
Typography Scale Generator
Generate a harmonious set of font sizes from a base size and a scale ratio, ready to copy as CSS custom properties.