Color Tools

Color Contrast Checker

Enter foreground and background colors to instantly see the WCAG 2.1 contrast ratio and whether your color combination passes AA or AAA accessibility standards for normal text, large text, and UI components.

Live preview as you pick Copy HEX, RGB, HSL instantly Browser-only — no upload

Normal text — Aa Bb Cc 123

Large text — Aa Bb 18pt+

Small 10pt text — harder to read

Contrast Ratio —

AA Normal text

Requires 4.5:1

AA Large text

Requires 3:1

AA UI components

Requires 3:1

AAA Normal text

Requires 7:1

AAA Large text

Requires 4.5:1

Features

  • WCAG 2.1 AA and AAA pass/fail for normal text, large text, and UI components
  • Precise contrast ratio calculation (e.g. 4.52:1)
  • Visual preview with sample text at both sizes
  • Foreground and background color swapper
  • Hex, RGB, and HSL color input
  • Suggests alternative shades that pass if your pair fails
  • No account, browser-only

How to use it

  1. Enter your foreground (text) color in HEX or RGB.
  2. Enter your background color.
  3. The contrast ratio appears instantly.
  4. See which WCAG levels pass (AA, AAA) for each text size.
  5. If it fails, check suggested passing alternatives.

Use cases

  • Auditing web accessibility before launch
  • Choosing text colors that meet WCAG requirements
  • Testing dark mode color combinations
  • Verifying button text vs background color

Limitations

  • Browser processing depends on available device memory for very large inputs.
  • Tool-specific limits based on file format or browser support are noted on each tool page.
See also

Related tools

color Browser

Color Picker

Pick any color visually and instantly get HEX, RGB, HSL, and HSV values. Browser-based color picker with live preview — no account needed.

Use tool
color Browser

Color Palette Generator

Generate harmonious color palettes from any base color. Complementary, analogous, triadic, tetradic, and split-complementary schemes — free, browser-based.

Use tool
color Browser

CSS Gradient Generator

Build CSS linear, radial, and conic gradients visually. Add color stops, set direction, copy ready-to-use CSS — free, browser-only.

Use tool
color Browser

Image Color Picker

Upload any image and click to pick colors from it. Extract the dominant color palette and copy HEX/RGB values — browser-only, no upload to server.

Use tool
Questions & answers

Frequently asked

What contrast ratio is required for WCAG AA?

4.5:1 for normal text (under 18pt/14pt bold), 3:1 for large text (18pt+/14pt+ bold), and 3:1 for UI components.

What is WCAG AAA?

WCAG 2.1 AAA requires 7:1 contrast for normal text and 4.5:1 for large text — a stricter standard recommended for maximum readability.