How to use Color Contrast Checker
- Enter both colorsType HEX codes, such as #1a1a1a or the shorthand #111, into Text color and Background color.
- Run the checkPress Run Color Contrast Checker to see a text preview and the contrast ratio.
- Read the WCAG resultsPass or Fail is shown for AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1) and AAA large text (4.5:1).
Common uses
- Checking button text against a brand color
- Testing light grey body text before a launch
- Documenting contrast for an accessibility review
Frequently asked questions
How do I use Color Contrast Checker?
1. Enter both colors: Type HEX codes, such as #1a1a1a or the shorthand #111, into Text color and Background color. 2. Run the check: Press Run Color Contrast Checker to see a text preview and the contrast ratio. 3. Read the WCAG results: Pass or Fail is shown for AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1) and AAA large text (4.5:1).
How is the ratio calculated?
With the WCAG relative-luminance formula, (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The ratio is shown cut to two decimal places, and Pass or Fail uses the exact value, so 4.499:1 fails AA even though it is close to 4.5.
Which WCAG levels are checked?
AA for normal text at 4.5:1, AA for large text at 3:1, AAA for normal text at 7:1 and AAA for large text at 4.5:1.
Can I enter RGB values or color names?
No. Both fields need HEX codes with six digits or the three-digit shorthand; the # sign is optional.
Are my colors stored?
The two HEX codes are sent to the GigaTools server, which calculates the ratio and returns the result. Nothing is saved.