Web Tools tools.bryantsmith.com

Color & Typography

Contrast Checker

Compare any foreground and background color and see the WCAG contrast ratio with AA and AAA pass levels for normal text, large text, and UI components. Everything runs in your browser — your colors never leave the page.

Runs in your browser v1.0.0

Colors

WCAG 2.1

Hex, rgb(), rgba(), or hsl() — for example #1a1a1a or rgba(26, 26, 26, 0.8).

Transparency is blended over the page background (white) before measuring.

Preview

live

Large heading sample

The quick brown fox jumps over the lazy dog. Normal body text should stay readable against this background at the selected contrast ratio.

Button Link text

Result

WCAG 2.1
— — Enter a foreground and background color to measure contrast.

WCAG pass levels

How it works

The contrast ratio is the relative luminance difference between the two colors, calculated with the WCAG 2.1 formula (L1 + 0.05) / (L2 + 0.05). Normal text needs at least 4.5:1 for AA and 7:1 for AAA, while large text and UI components need 3:1 for AA. Alpha colors are composited before measuring, and the current colors can be shared with the page URL.

Related tools

  • WCAG Contrast Batch CheckerTest every foreground and background combination between two color palettes and see which ones pass WCAG contrast.
  • Accessible Palette GeneratorTurn one brand color into an accessible tonal palette whose text, button and muted roles are adjusted to meet a WCAG contrast target.
  • Color MixerMix two colors, then build design-system tints, shades, UI states, palettes and transparency steps with HEX, RGB, HSL and color-mix() output.
  • Color Palette GeneratorTurn one seed color into a coordinated color-harmony palette, then copy it as CSS variables, JSON tokens, Tailwind colors or a hex list.
  • Color Shade GeneratorGenerate configurable lighter and darker shade scales from a base color, then copy CSS variables, JSON tokens or Tailwind config.
  • Universal Color ConverterConvert HEX, RGB, HSL, HSV, HWB, CMYK and alpha-aware color formats live in your browser.

More Color & Typography tools