CareerByteCode
Sign inJoin membership

Color Contrast Checker for WCAG AA and AAA

For developers and designers making accessible buttons, text and themes. Enter a text and background colour to see a live preview, the contrast ratio and four WCAG pass or fail results.

FreeRuns in your browserNothing uploadedNo sign-up neededAll 12 tools in the Developer Toolbox
Keep this resultSign in to email it to yourself or save it to your profile. The tool itself never needs an account.

ByteLabs

Close the gaps with real-world projects

Build industry projects on ByteLabs and add verified proof of your skills to your public profile.

Explore ByteLabs
How to use

How to use the Color Contrast Checker

  1. Enter the text colour in Foreground as HEX (like #1E52E8) or rgb().
  2. Enter the Background colour the same way.
  3. Look at the live sample text preview.
  4. Read the contrast ratio and the AA and AAA results for normal and large text.
Worked example

An example, step by step

You enter

Foreground #1E52E8 on Background #FFFFFF

The tool shows

Contrast ratio: 6.13 : 1 Normal AA (4.5): PASS Normal AAA (7): FAIL Large AA (3): PASS Large AAA (4.5): PASS

FAQ

Questions about the Color Contrast Checker

What contrast ratio is needed for WCAG AA?

Normal text needs at least 4.5 to 1, and large text (about 24px, or 18.5px bold) needs at least 3 to 1. AAA raises these to 7 to 1 and 4.5 to 1.

Does grey #777777 on white pass accessibility checks?

Only for large text. It scores about 4.48 to 1, just under the 4.5 needed for normal text at AA.

Can I enter colour names like red or navy?

No. Use 3- or 6-digit HEX, with or without the hash, or rgb() and rgba() values. Alpha transparency is ignored.

Is the Color Contrast Checker free and private?

Yes. It is free, needs no sign-up and runs entirely in your browser, so what you type is not uploaded. You only sign in if you want to email a result to yourself or save it to your CareerByteCode profile.

Related tools

You may also need

DeveloperUUID GeneratorGenerate v4 UUIDs, one or many at a time.DeveloperJSON to CodeTurn JSON into TypeScript, Go or Python types.DeveloperJSON to YAML ConverterConvert and validate between JSON and YAML.DeveloperText Diff CheckerLine-by-line difference between two blocks of text.DeveloperCase ConvertercamelCase, snake_case, kebab, PascalCase and more.DevOps.gitignore GeneratorCombine templates for your stack, editor and OS, no duplicates.DataSQL FormatterPretty-print and indent a SQL statement.SecurityHash IdentifierGuess a hash type from its length and shape.

Open the Developer Toolbox · All 217 free tools

I already have a job

Grow at work and build a second income as a creator

  1. Share what you know on ByteBlog and grow followers
  2. Open your ByteStore: 1:1 calls, courses, services
  3. Teach a ByteClass cohort or publish on BytePlay; freelancing becomes one of your roles
See this pathStart free with Google
Copied