Rainey Grunwald
HomeContact
Playground

Color Palette Audit & Playground

Did you make a color palette at the 2025 Design Portfolio Show?

Type your color codes into the corresponding boxes (or hex codes if you have them on hand) and see if your color palette meets accessibility standards for web design!

Create Your Palette
qr code
background
text
primary
secondary
accent
Toggle Color Theme
Why should I care?
Accessibility doesn’t just help people with disabilities, it helps everyone! Curb ramps for crosswalks were designed for people with mobility issues, but they also help people pushing strollers, riding scooters or bikes, and the elderly. The same concept applies when we design on the web. Everyone benefits when we design with accessibility in mind!
Contrast Check

With the contrast check, we’re measuring the contrast between text and graphics against the background color. This is called contrast ratio. The higher the score, the higher the contrast.

Here are the guidelines you should reference when choosing colors for web design:

WCAG 2.0 Level AA:
  • Normal Text: 4.5:1
  • Large Text: 3:1 (18pt or 14pt + bold and above)
  • Non-Text: 3:1(graphics, UI elements)
WCAG 2.1 Level AAA:
  • Normal Text: 7:1
  • Large Text: 4.5:1 (18pt or 14pt + bold and above)
  • Non-Text: 3:1(graphics, UI elements)
background
text
Total
21.0 : 1
primary
text
Total
4.6 : 1
secondary
text
Total
12.0 : 1
primary
background
Total
4.5 : 1
secondary
background
Total
1.8 : 1
background
accent
Total
3.0 : 1
A Closer Look
Choosing colors that are WCAG compliant is important because it helps people with vision impairments, such as low vision and color blindness, be able to view and read content on the web. It is also beneficial to people who don’t have a visual impairment because the correct color contrast reduces eye strain and makes text easier to read for everyone.
Bad Boys, Bad Boys
WCAG guidelines aren’t a suggestion, it’s the law. Under the ADA (Americans with Disabilities Act) it states that websites need to follow the 2.0 level AA of WCAG contrast compliance.
Color Blindness Check

This is what your color palette will look like to people with different types of color blindness.

We check for this because if the contrast between two colors is not high enough, they will appear the same to some users.

protanopia
deuteranopia
tritanopia
Would You Look At That?
Approximately 300 million people worldwide have Color Vision Deficiency (color blindness). 1 in 12 men are color blind (8%), and 1 in 200 women are color blind (0.5%).

Reflection

How did you score? Would you need to make changes to your palette to make it WCAG compliant and accessible?

When designing for the web we should always be thinking about the user. That means all users! We design experiences, so we should make sure that everyone can experience our creations how they’re able. We shouldn’t think of it as something we have to do because it’s the law, but something we do because it’s the kind, inclusive, and right thing to do.

Being inclusive benefits everyone!