Skip to main content
dubinity

Design & Accessibility

Color Contrast Checker

Check the WCAG 2.2 contrast ratio of a text and background colour, with AA and AAA verdicts and the nearest passing colour.

  • Runs in your browser
  • Works on mobile
  • In: HEX, RGB, HSL, OKLCH
  • Out: Contrast ratio, Shareable link
Loading the tool…

Your files and text are processed on your own device, inside this page. Nothing is uploaded to Dubinity or stored, and closing the tab discards it. How privacy works

About Color Contrast Checker

Enter two colours as hex, rgb(), hsl() or oklch() and see the exact WCAG 2.x contrast ratio with pass or fail for normal text, large text and UI components (SC 1.4.11), plus a live preview. If a pair fails, the checker suggests the closest foreground that passes, keeping its hue.

Ratios are shown truncated, never rounded up, because WCAG does not round: 4.49:1 fails 4.5:1. A semi-transparent foreground is blended over the background first; a semi-transparent background is assumed to sit on a white page. This measures the WCAG 2 ratio only - it is not an APCA (WCAG 3 draft) score, and contrast alone does not make a design accessible.

How to use it

  1. 1Enter the text colour and the background colour, or pick them with the colour pickers.
  2. 2Read the ratio and the pass or fail for normal text, large text and UI components.
  3. 3If it fails, apply the suggested nearest passing colour.
  4. 4Copy the link to share the exact pair with your team.

Questions

Was this tool helpful?

Related tools

All design tools

  • WCAG Palette Contrast Grid

    Paste up to 12 colours and see the WCAG contrast ratio of every pair in one grid, filtered by AA or AAA.

    HEX · RGB · HSL
    Runs in your browserOpen tool

  • Color Blindness Simulator

    See an image or a set of colours as people with protanopia, deuteranopia, tritanopia and other colour vision deficiencies see them.

    PNG · JPG · WEBP
    Runs in your browserOpen tool

  • Color Palette Generator

    Generate colour palettes from a base colour and a harmony, or at random with locks, then export CSS, tokens, Tailwind or a PNG.

    HEX · RGB · HSL
    Runs in your browserOpen tool

  • PX to REM Converter

    Convert pixels to rem and rem to pixels for CSS, from any root font size, with points and percent alongside.

    Pixels · REM · Root size
    Runs in your browserOpen tool

  • Color Converter

    Convert a colour between HEX, RGB, HSL, HSV, HWB, CMYK and OKLCH, with contrast against black and white.

    TEXT
    Runs in your browserOpen tool

  • Lorem Ipsum Generator

    Generate placeholder paragraphs, sentences or words, in classic Latin or in Arabic filler text.

    NONE
    Runs in your browserOpen tool