Sanskar

Developer Lab · Accessibility tools

Color Contrast Checker

Check text and interface color pairs against WCAG 2.2 contrast thresholds, entirely in your browser.

Developer Lab

Use a three- or six-digit hex color, such as #123 or #112233. Opaque colors only; transparency is not calculated.

Contrast results appear automatically when you edit a color.

Live preview

Normal text: The quick brown fox jumps over the lazy dog.

Large text example

Calculated contrast

—

Normal text · AA (4.5:1)
Not calculated
Normal text · AAA (7:1)
Not calculated
Large text · AA (3:1)
Not calculated
Large text · AAA (4.5:1)
Not calculated
UI components / graphics · AA (3:1)
Not calculated

Suggested foreground colors

Keep your background and try an adjusted text color. Suggestions blend your foreground toward black or white until they meet the selected contrast ratio. They are not guaranteed to be visually closest or suitable for every design.

  • 3:1 · Large text / UI graphics AA

    — Enter two valid colors.

  • 4.5:1 · Normal text AA

    — Enter two valid colors.

  • 7:1 · Normal text AAA

    — Enter two valid colors.

Accessible text color palette

Ten shades are blended from your foreground color toward white or black. Each swatch selects whichever of black or white gives the stronger contrast, and indicates AA or AAA for normal text. This does not guarantee that arbitrary text or adjacent colors will be accessible.

  • 50 · JavaScript required for preview.
  • 100 · JavaScript required for preview.
  • 200 · JavaScript required for preview.
  • 300 · JavaScript required for preview.
  • 400 · JavaScript required for preview.
  • 500 · JavaScript required for preview.
  • 600 · JavaScript required for preview.
  • 700 · JavaScript required for preview.
  • 800 · JavaScript required for preview.
  • 900 · JavaScript required for preview.

Light and dark theme tokens

Use the foreground color as an accent seed. The generated accent is adjusted to contrast at least 3:1 against each theme surface, and its black/white button text meets normal-text AA. Neutral colors are predefined. Verify focus, hover, disabled states and other elements in your final interface.

Enter colors to generate two themes.

Light theme

Example secondary text

Sample button

Requires JavaScript.

Dark theme

Example secondary text

Sample button

Requires JavaScript.

Reading the results

WCAG 2.2 requires at least 4.5:1 contrast for normal text at AA and 7:1 at AAA. Large text needs 3:1 at AA and 4.5:1 at AAA. Essential non-text interface graphics typically need 3:1 at AA against adjacent colors.

Large text means at least 18 pt regular (about 24 CSS px) or 14 pt bold (about 18.7 CSS px). These results assess only opaque foreground/background colors, not font thickness, transparency, images, gradients, hover states, or full WCAG conformance. The suggested foreground is obtained by blending toward black or white and may be unavailable at 7:1 on some backgrounds. Palette swatches separately compute readable black/white text with unrounded WCAG ratios; tint and shade blending is not perceptually uniform, and the palette may contain duplicate colors at extreme endpoints. Pass/fail uses the unrounded ratio.

Reference: WCAG 2.2 Contrast (Minimum), Contrast (Enhanced), and Non-text Contrast. Use Copy CSS variables to reuse the current colors in a stylesheet. All calculations remain in your browser and this tool does not upload or persist your color inputs. Copy share link creates a URL fragment containing your two hex colors; opening it restores them. URL fragments are not sent to the server in the page request, but shared links may appear in browser history or be visible to anyone you send them to.