🎨 Color Contrast Checker

Checks the WCAG 2.1 contrast ratio between two colors and whether it passes AA/AAA for normal and large text.

Sample text
Smaller sample text
CheckRequirementResult

About this tool

Check whether a text colour on a background colour meets the WCAG 2 accessibility guidelines. Enter two colours and see the contrast ratio plus pass/fail results for AA and AAA at normal and large text sizes — with a live sample so you can judge it by eye as well.

Low contrast is the most common accessibility failure on the web and in game UI. Fixing it takes seconds once you can measure it.

How to use it

  1. Enter or pick the foreground (text) colour.
  2. Enter or pick the background colour.
  3. Read the contrast ratio and the AA/AAA results; adjust until it passes.

Frequently asked questions

What ratio do I need?

WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA requires 7:1 and 4.5:1 respectively.

Does this apply to games?

Formally WCAG targets web content, but the same ratios are a good baseline for HUDs, menus and subtitles — many console certification checklists reference them.

Which colour formats are accepted?

HEX (#RRGGBB) via the input or the colour picker.

Free, private, no account. Like every DevForge tool, this one runs in your browser and never uploads your files. See all 35 free tools or join the DevForge community to share your own games, tools and assets.

Related tools

🌒CSS Box Shadow GeneratorBuild single or layered box shadows visually and copy the finished CSS. 🌈CSS Gradient GeneratorBuild linear or radial gradients visually with a color-stop editor and copy the ready-to-use CSS. 🚫.gitignore GeneratorPick your languages, frameworks, and editors, get a ready-to-use .gitignore. ✂️Base64 & URL Encoder / DecoderEncode or decode text as Base64 or URL-encoded form, instantly. 🔠Bitmap Font GeneratorRender any font into a glyph atlas PNG plus JSON / BMFont descriptor for Phaser, Pixi, Godot, Unity. 🎨Color Palette GeneratorGenerate random, complementary, analogous, triadic, or monochromatic color schemes from scratch.