WoluTools
Find a tool

Images & Design

Accessible color palette generator with WCAG contrast

Type or pick a brand color to get tints and shades from 80% white to 60% black, each scored for AA and AAA on a light and a dark background. Paste several hex codes to test every pair, or add the stylesheet or token file you already use.

#RRGGBB, #RGB or #RRGGBBAA
Opaque #RRGGBB
Opaque #RRGGBB

One per line, separated by commas, or a CSS snippet. Each color is tested as text on every color after it, as in the tool.

Have a stylesheet or token file? Drop it here.

TXT or CSS · 2 to 50 colors as #RRGGBB or #RRGGBBAA
Free account needed for your 3 free jobs a day

See a sample report with 6 pairs

Standard toolIncluded · 3 free jobs a dayFree: 3 jobs a dayPro: up to 200 jobs a day · €12.99/month or €89.99/year
  • TXT / CSS
  • Up to 50 colors
  • WCAG AA or AAA

Tints and shades of #3B6FE0

Each step as text on #FFFFFF and on #14213D. Select a hex code to copy it.

  1. 1.30Fail12.30AAA
  2. 1.73Fail9.24AAA
  3. 2.35Fail6.81AA
  4. 3.273:14.88AA
  5. 4.63AA3.453:1
  6. 6.56AA2.43Fail
  7. 9.47AAA1.69Fail
  8. 13.58AAA1.18Fail

Closest passing text color for the base

  • On #FFFFFFAAas it is, 4.63:1AAA7.00:1
  • On #14213DAA4.55:1AAA7.05:1

Opens the tool with the brand color and both backgrounds (3 colors). You get contrast-report.csv with every pair and role, palette.css and manifest.json. A successful check uses one of your 3 free jobs a day.

AAA 7:1 or more · AA 4.5:1, body text · 3:1 large text and UI parts only · Fail below 3:1

BringOne hex code, a pasted list, or a TXT or CSS file
GetContrast report per pair and role, suggested passing colors, CSS variables and a manifest
PrivacyPreview in your browser · encrypted source · 24-hour result

What the full check returns

The tool tests every pair in your list against body text, large text and UI parts. Where a pair fails, it mixes the text color toward black or white in small steps and lists the passing mix closest to your original. Here is a sample run with four colors.

Sample result: 4 brand colors, 6 pairsFictional palette, scored with the same formulas the tool uses. The earlier color in the file is the text, the later one the background.
Contrast target

AA: 3 of 6 pairs fail for body text, 3 get a passing suggestion.

AAA: 4 of 6 pairs fail for body text, 3 get a passing suggestion.

  1. Ink #14213D on Brand blue #3B6FE03.45:1

    • Body text Fail
    • Large text Pass
    • UI parts Pass
    • Body text Fail
    • Large text Fail
    • UI parts Pass

    Suggested text color #010103 reaches 4.50:1

    No mix of #14213D toward black or white reaches 7:1 on #3B6FE0. The report lists the pair as failed.

  2. Ink #14213D on Accent orange #F5A5247.83:1

    • Body text Pass
    • Large text Pass
    • UI parts Pass
    • Body text Pass
    • Large text Pass
    • UI parts Pass

    Meets AA for body text as it is.

    Meets AAA for body text as it is.

  3. Ink #14213D on Paper #FFFFFF15.97:1

    • Body text Pass
    • Large text Pass
    • UI parts Pass
    • Body text Pass
    • Large text Pass
    • UI parts Pass

    Meets AA for body text as it is.

    Meets AAA for body text as it is.

  4. Brand blue #3B6FE0 on Accent orange #F5A5242.27:1

    • Body text Fail
    • Large text Fail
    • UI parts Fail
    • Body text Fail
    • Large text Fail
    • UI parts Fail

    Suggested text color #24448A reaches 4.54:1

    Suggested text color #162852 reaches 7.05:1

  5. Brand blue #3B6FE0 on Paper #FFFFFF4.63:1

    • Body text Pass
    • Large text Pass
    • UI parts Pass
    • Body text Fail
    • Large text Pass
    • UI parts Pass

    Meets AA for body text as it is.

    Suggested text color #2D55AB reaches 7.00:1

  6. Accent orange #F5A524 on Paper #FFFFFF2.04:1

    • Body text Fail
    • Large text Fail
    • UI parts Fail
    • Body text Fail
    • Large text Fail
    • UI parts Fail

    Suggested text color #A06C18 reaches 4.51:1

    Suggested text color #785112 reaches 7.04:1

Download: palette.css · contrast-report.csv · manifest.json

From colors to report in three steps

  1. 1

    Add your colors

    Paste 2 to 50 hex codes on this page or add a TXT or CSS file. Order matters: each color is tested as text on every color after it.

  2. 2

    Pick the target

    WCAG AA (4.5:1 for body text) or AAA (7:1), plus an opaque canvas if a color has alpha.

  3. 3

    Review and download

    Check failed pairs and suggestions, then download palette.css, contrast-report.csv and manifest.json.

Checking brand colors against WCAG contrast levels

What you can start from

Start from one brand color, a pasted list or a file. The tint and shade scale at the top of this page runs in your browser and sends nothing. When you start a check from there, the colors go to the tool as a small text file. You can also upload a TXT or CSS file with your brand colors as six- or eight-digit hex values. Up to 50 colors are read in one run. Colors are read as standard web colors (sRGB). If a color has an alpha channel, you confirm an opaque canvas color first, and the transparent color is measured over that canvas. Only solid colors are checked. Gradients and image backgrounds are not sampled.

What the download contains

The package holds palette.css with your colors as CSS variables, contrast-report.csv and manifest.json. The report checks every color pair against three thresholds in separate columns: body text, large text and UI parts. A pair can pass for large text and still fail for body copy. The manifest records the canvas you chose and a fingerprint of your source file, so you can confirm later which file the numbers came from.

Targets, suggestions and your review

You choose WCAG AA or AAA as the contrast target and set the canvas behind alpha colors. Where a pair fails, the report suggests opaque foreground colors that would pass. They are listed for review and never written back into palette.css. Pairs that look very similar are flagged by OKLab distance. That flag is a rough signal. It is not a color-blindness simulation, an APCA score or a WCAG certification, and it does not replace an accessibility review.

Questions before you run it

Can I start from a single brand color?

Yes. Type or pick one hex color at the top of this page. You see eight steps from 80% white to 60% black, each with its contrast on a light and a dark background, and the closest text color that passes AA and AAA. This preview runs in your browser and does not use a free job. For the CSV report, send the color and both backgrounds to the tool.

Do I need an account for the free jobs?

No. The 3 free jobs a day run in a guest session without sign-up. Failed jobs are not counted, and the counter resets at midnight UTC.

Which color formats does it read?

Six-digit and eight-digit hex values (#RRGGBB and #RRGGBBAA) from a TXT or CSS file. Every match in the file is picked up and duplicates are removed, so an existing stylesheet or token file works as it is. Short hex such as #FFF, rgb(), hsl() and named colors are not read. A run needs 2 to 50 unique colors.

How are colors with an alpha channel measured?

A transparent color is first composited over the opaque canvas you confirm before the run, and the foreground color is then composited on top of that. The canvas value is recorded in the manifest so the numbers can be reproduced.

Does it check large text and UI components separately from body text?

Yes. Every pair is reported against the normal text, large text and non-text UI component thresholds in separate columns of contrast-report.csv, so a pair can clear large text and still fail for body copy.

Are the suggested foreground colors written back into my palette?

No. Suggestions are opaque candidates listed for review, and palette.css keeps the colors you supplied.

Can it tell me whether two brand colors look alike to a color-blind viewer?

It flags pairs that sit close together in OKLab distance, which is a rough signal for visually similar colors. That is not a color-vision deficiency simulation, an APCA score or a WCAG certification.