Skip to content

Color Contrast Checker (WCAG AA & AAA)

Check the contrast ratio between text and background colors against WCAG 2 AA and AAA for normal text, large text and UI components, with a live preview and one-click suggestions for passing colors.

—
Contrast ratio
  • Normal text · AA (4.5:1)
  • Normal text · AAA (7:1)
  • Large text · AA (3:1)
  • Large text · AAA (4.5:1)
  • UI components & icons (3:1)

Large heading text

Normal body text. The quick brown fox jumps over the lazy dog. Good contrast keeps your content readable in bright sunlight and for people with low vision.

Small print, captions and footnotes need contrast too.

Button Link text

How to check color contrast

  1. Enter your text color and background color as HEX, RGB, HSL or a color name, or pick them with the color wells.
  2. Read the contrast ratio and the pass/fail results for each WCAG level.
  3. If a pair fails, click one of the suggested colors. The checker keeps the hue of your text color and only changes its lightness until the pair passes.

WCAG contrast requirements

  • AA, normal text: at least 4.5:1. This is the level most accessibility laws and audits refer to.
  • AA, large text: at least 3:1. Large means 24px (18pt) and up, or 18.66px (14pt) bold and up.
  • AAA, normal text: at least 7:1, and 4.5:1 for large text.
  • UI components and graphics: icons, input borders and focus indicators need at least 3:1 against their surroundings.

The ratio is calculated with the WCAG 2 relative luminance formula and is rounded down, so a pair shown as 4.50:1 really meets the 4.5:1 threshold. Semi-transparent text colors are blended over the background before measuring.

Tips

  • Gray text on white is the most common failure: #767676 is the lightest gray that still passes AA on pure white.
  • Check every state: placeholder text, disabled buttons, links and hover colors.
  • Use Swap to test light text on a dark background, for example on a filled button.

Build accessible color scales with the tints & shades generator; each swatch there already shows its contrast with white text.

More color tools

Color Picker & Converter (HEX, RGB, HSL, HSV, CMYK)
Pick any color and convert it between HEX, RGB, HSL, HSV and CMYK. Grab colors from your screen, adjust hue, saturation, lightness and opacity, and copy CSS-ready values.
Color Palette Generator for Websites
Generate harmonious five-color palettes from a base color using analogous, monochromatic, complementary, split, triadic and tetradic rules. Lock colors, share a link and export to CSS, SCSS, Tailwind or JSON.
Tints & Shades Generator (50–950 Color Scale)
Turn one color into a Tailwind-style 50–950 color scale or into tints and shades in 5, 10 or 20% steps. Click to copy HEX values and export CSS variables, Tailwind theme, SCSS or JSON.
CSS Color Names: All 148 Named Colors with HEX Codes
All 148 CSS named colors with HEX, RGB and HSL values. Search by name or HEX code, filter by color family, sort by hue or lightness and copy any value with one click.
Color Families: Color Codes by Color Group
Browse colors by family: reds, oranges, yellows, greens, cyans, blues, purples, pinks, browns, grays, whites and blacks, with HEX codes and ready-made color combinations.
Popular Colors: Tailwind CSS and Bootstrap 5 Palettes
The complete Tailwind CSS v3 color palette (22 colors, 50–950) and Bootstrap 5.3 color scales (100–900) with HEX codes. Click any shade to copy it.
Web Safe Colors: The 216-Color Palette
The 216 web-safe colors with HEX codes, grouped by red value, plus a tool that finds the nearest web-safe color for any color.