How to use Contrast
- Set the background and text colors with a hex code, the color picker or the sliders, or upload a graphic and pick its colors.
- Read the ratio and the four grades. They update as you move a slider.
- Type your own words into the preview, try a typeface, and save the pairs you like.
When to use it
Use it before you post a graphic, pick brand colors or set text on a colored background, to check that people can read it.
Tips
- Normal text needs 4.5:1 for AA. Large text needs 3:1.
- Reverse swaps the two colors. The ratio stays the same, but light text on dark can look different at small sizes.
- The address holds both colors, so you can send a pair by copying the link.
Questions
- What do AA and AAA mean?
- They're the two main levels in the Web Content Accessibility Guidelines. AA is the usual target. AAA is stricter.
- What counts as large text?
- 24px and up, or about 19px and up in bold.
- Are my colors or images sent anywhere?
- No. The check and the color picking run in your browser. Picking a typeface loads it from Google Fonts.