Skip to main content
dubinity

Design & Accessibility

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.

  • Runs in your browser
  • Works on mobile
  • In: HEX, RGB, HSL, OKLCH
  • Out: CSV, Markdown
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 WCAG Palette Contrast Grid

Paste a palette as hex, rgb(), hsl() or oklch() values, one per line or separated by commas, optionally with names. The grid shows every text-on-background pair with its exact ratio and the best level it reaches: AAA, AA, AA Large (which also covers UI components) or fail.

Filter to the level you need to see which combinations are safe to use, then copy the grid as CSV or Markdown for a design system document. Semi-transparent colours are blended the same way as in the single-pair checker: a translucent background is assumed to sit on white.

How to use it

  1. 1Paste your colours, one per line or comma-separated. Add a name before a colour to label it.
  2. 2Read the grid: rows are text colours, columns are backgrounds.
  3. 3Filter by AA Large, AA or AAA to highlight only the passing pairs.
  4. 4Copy the grid as CSV or Markdown.

Questions

Was this tool helpful?

Related tools

All design tools

  • 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.

    HEX · RGB · HSL
    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

  • Design Token Generator

    Build a small design-token set - colours, type scale, spacing, radii and shadows - and export CSS variables, DTCG JSON or Tailwind.

    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 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