Skip to main content
Freerange Future

How to use this tool

A step-by-step guide to checking your colour accessibility.

Comparing two colours

The Compare two colours mode is the quickest way to check whether a specific text colour works on a specific background.

  1. Enter your colours. Type a hex value into each card's hex field (e.g. FF5500), or click the colour swatch to open a visual picker. You can enter values with or without the # prefix.
  2. Name your colours (optional). Enter a brand name like “Electric Blue” or “Oat Cream”. Names appear in exports and help you keep track of your palette.
  3. Read the results. The tool shows your contrast ratio and whether the combination passes or fails for regular and large text. Results update in real time as you adjust colours.
  4. Choose your WCAG level. Use the dropdown in the navigation bar to switch between AA, AAA, or Both. AA is the most common requirement. AAA is stricter and recommended for body text.

Understanding the results

✓ Pass

The colour combination meets the contrast requirement for both regular and large text. You can use this combination anywhere.

Pass Large

The combination only passes for large text (18pt / 24px and above, or 14pt bold). Do not use it for body text or smaller UI elements.

✕ Fail

The combination does not meet contrast requirements at any text size. Consider using the improvement suggestions to find an accessible alternative.

Using contrast improvement suggestions

When a colour combination fails, the tool offers three alternative shades that would make it accessible:

  • Minimum accessible — the closest shade that just passes the required threshold.
  • Comfortable — a moderately adjusted shade that comfortably exceeds the threshold.
  • High contrast — a more aggressively adjusted shade for maximum readability.

The lock icon on each colour card lets you choose which colour stays fixed. Lock the colour you can't change (e.g. an established brand colour), and the tool adjusts the other one. Click Apply on any suggestion to use it.

Checking a full palette

The Compare multiple colours mode generates a contrast matrix showing every colour tested against every other colour.

  1. Add your colours. Click “Add a colour” to add up to 12 colours. Enter hex values and optional names for each.
  2. Generate the matrix. Click “Create my colour chart” to see the full matrix. The matrix doesn't auto-generate — you choose when it's ready.
  3. Read the matrix. Each cell shows a colour as text on another colour as background. Passing cells show an Aa preview. Failing cells show an ✕.
  4. Click failing cells to see improvement suggestions for that pair, just like in two-colour mode.
  5. Review summary cards below the matrix — each colour gets a card listing all its accessible pairings.

Exporting results

Both modes offer a download button with three format options:

  • PDF — a styled, print-ready document suitable for inclusion in brand guidelines.
  • SVG — a vector image that scales to any size without losing quality.
  • PNG — a raster image for quick sharing via email, Slack, or presentations.

Exports include colour swatches, names, hex values, the contrast ratio, pass/fail status, and the WCAG level tested.