DEV Community

Cover image for Understanding Color and Accessibility
Kathryn Grayson Nanz
Kathryn Grayson Nanz

Posted on • Originally published at


Understanding Color and Accessibility

When it comes to making your applications accessible, the colors that you choose play a huge role! From contrast ratios to communicating information and offering users optional themes, let’s take a look at ways you can optimize your color choices to be as accessible as possible!

Color Contrast

When you’re choosing colors for your various UI elements, it’s important to make sure you’re meeting an accessible standard for color contrast. The WCAG (Web Content Accessibility Guidelines) defines three levels of color contrast ratios – failing, AA, and AAA. AA level means your colors have enough contrast to be readable, but might still present problems for some users. AAA level means you have achieved extremely high contrast that should be readable for the vast majority of your users. You should always aim for AAA compliance, but making sure you’re not failing is a good starting point.

Text, especially, is incredibly difficult to read when there’s not enough contrast between it and the background color – and this is only exacerbated for any of your users with less-than-perfect 20/20 vision. Not to mention, there are lots of adjustments a user can make to their display – night shift, brightness, monitor calibrations, etc. – all of which can impact your colors in ways that are entirely outside your control. One of the best ways you can allow your app to remain accessible through all of this is to pay attention to your color contrast ratios and ensure that they comply with the WCAG standards, so you have some wiggle room to accommodate these extenuating circumstances.

Fortunately, this is a really easy thing to do, because color contrast analyzers are easily found online just by googling “color contrast checker”. My personal favorite is the Adobe Color accessibility tools, which does a great job of showing examples for different color contrast situations, as well as allowing you to simulate different versions of colorblindness to see how your color palette would look to differently sighted users.

A screenshot from the Adobe Color contrast checker showing an example of failing color contrast.

A screenshot from the Adobe Color contrast checker showing an example of acceptable color contrast.


You might already be familiar with the color contrast ratios and even understand why they’re so important – but do you know the color theory behind how they work?

When we’re talking about color contrast, what we’re primarily talking about is a comparison of values. Value is the lightness or darkness of a hue – it’s what creates the difference between sky blue and navy. You can change the value of a color in 3 ways: by adding white to create a tint, adding grey to create a tone, or adding black to create a shade. When the values of two different colors are too similar…that’s when you run into contrast issues. Some colors (like bright oranges or reds) will be especially difficult to achieve high contrast with because their values fall right in the middle of the spectrum – it’s hard to go either light or dark enough to contrast with them effectively.

A great, quick, way to check your contrast (and see this in action) is to convert your display to greyscale, which takes the hue out of the equation and only shows you the value. If you can’t easily read the text or understand the layout when it’s in greyscale, chances are, you have a color accessibility issue that needs solving.

The same failing Adobe color contrast image from before, but in greyscale, emphasizing the lack of readability.

The same failing Adobe color contrast image from before, but in greyscale, emphasizing the successful contrast ratio.

Communicating Information via Color

Another important aspect of accessibility and color is ensuring that you’re not communicating any information through color alone. This is a dangerously easy trap to fall into, unfortunately – especially with things like forms, data visualization, and confirmation / cancellation dialogs.

In fact, let’s take a look at some forms to see an example. How many times have you seen a form that changes the border color of an input element to red in order to signify failed validation? It’s not such a bad thing to long as you also make sure to include some kind of icon, text, or other element to indicate to the user that something isn’t right. If you’re relying on the red border color alone, then there’s a large percentage of your users who will struggle to figure out why their form won’t submit.

Bad Example
A form using only red borders to indicate unsuccessful validation.

Good Example
A form using colored borders and backgrounds, as well as text and icons to indicate successful validation.
Image from

Excellent designs will leverage multiple forms of communication in order to most effectively guide the user. To level up the UX and accessibility of your work, try pairing a color indicator with an icon (such as a check for successfully validated content and a warning icon for failed validations) and/or text (such as an error message) that tells the user precisely what is happening.


These days, it’s becoming more and more popular to offer multiple theme options in your application and allow your users to choose the one they like best. Almost all apps now include light and dark themes, but some go beyond that to offer all sorts of color palettes! This is not only a delightful touch for your users, though – it can also be an accessibility tool for them.

Dark Mode

Offering a dark mode is actually a really great thing you can do to support your users…even if you might not have thought of it as an accessibility feature before now! Dark mode is important for folks that struggle with migraines, light sensitivity, eye strain, and similar. Most folks already kind of know this, but might not really be thinking about it as an actual accessibility feature – but I'd bet that the majority of developers have their code editor set to a dark theme in order to reduce the eye strain of staring at their computers all day.

However, dark mode (and other alternate color themes) are often forgotten when you're running accessibility checks – can you really guarantee that your color contrast is still good enough in dark mode, or that your focus highlight is still clearly visible? It's not enough to only be accessible in the default theme! If you're offering multiple color themes, but only one of them is accessible...then you're not really offering multiple color themes to everyone.

High Contrast Themes

Another thing worth considering is high contrast themes. You might have seen these before; they usually use a pure black background color, and then neon colors for the rest of the palette. You might find it visually jarring or unpleasant, but pleasantness isn't the goal – it's purely an exercise in readability. The example here is one of the Windows OS high contrast themes, and you can see that the colors they've chosen stand out starkly from the black background. If you're creating color themes for an application UI, it‘s worth considering adding a theme like this in addition to whatever standard themes you’re planning to include.

An example color palette for a high contrast theme.

Color is a Crucial Part of Accessibility!

Once we acknowledge the reality that accessibility is a required part of the full functionality of the product, that truth can inform every decision we make around planning, design, development, and testing. Working as a developer, by nature, involves constantly learning new things and adjusting the way we think about software and the web. The more you can learn about accessibility and start implementing that knowledge in your work, the more your users will benefit!

Top comments (11)

mfurmaniuk profile image

Great points! We tend to rely on the Axe Tool from Deque as our checker, and a team of Accessibility Engineers who use assistive tools in their day to day life. One thing we learned in speaking them about UI design is Color is meaningless and we need multiple ways of communicating that information. Didn't know Adobe had a tool, will have to check that out.

millebi_41 profile image
Bill Miller

This article is so very right. As a colour blind person using bad combinations of colour or attempting to impart information are the two biggest problems I encounter.

One other tip: When using a tool to generate your CSS, please attempt to use consistent names for the style classes. I use a browser plugin Stylus, which allows me to adjust the style of the pages I'm viewing, so when I look at a site that is regularly unclear for me, I can adjust the style of elements to make it better for me.

I have big adjustments for JIRA and BitBucket to make my life easier, and I had adjustments for TweetDeck; but now they use randomly generated class names and I can't "fix" that anymore. So I'm stuck with what they provide... which is terrible for me. /whine

rachelfazio profile image
Rachel Fazio

Hey! As a former art teacher + DEV Content Creator, YES! Thank you for sharing this. Great post, happy to see this in the Top 7.

Sloan, the sloth mascot
Comment deleted
marissab profile image
Marissa B

Fantastic article, very well-written. That Adobe tool is super cool - added to my favs!

priteshusadadiya profile image
Pritesh Usadadiya

This article was curated as a part of #73rd Issue of Software Testing Notes Newsletter.

crazysniperr profile image
Siddhant Dixit

Great post, it's very helpful 💯

irreverentmike profile image
Mike Bifulco

Kathryn, this is such a great post! I spent years doing dev work before I realized that colors had anything to do with math... that realization was actually the thing that spurred me to go to grad school for HCI. Funny enough, I published a newsletter this week about color (The finicky nature of color in product design).

I'm putting this article in my bookmarks for a future dispatch... thanks for putting this together. :)

adriens profile image

👏 Great post ❣️

👉 @lschaeffer313 @sverolle that could be useful for

GitHub logo lschaeffer313 / domaine-nc-mobile

Appli mobile pour la consultation des domaines en Nouvelle-Calédonie

📱 A propos

semantic-release Deploy to prod

Flutter Google Play


domaine-nc-mobile est une application mobile développé en mode Open Innovation et qui via la consommation d'API, permet de :

  • 🔎 Chercher des noms de domaines en .nc
  • ✔️ Visualiser les détails d'un nom de domaine particulier
  • 🔔 Enregistrer aisément la date d'expiration d'un nom de domaine comme reminder dans le calendrier de votre choix

🔖 Liens utiles

👶 Les noms de domaine en Nouvelle-Calédonie ?

"Quand on ne connaît pas bien comment internet fonctionne, le système des noms de domaine peut paraître un peu obscur."

"Les définitions que l’on trouve n’aident pas vraiment à comprendre le principe et pourtant, c’est un système relativement simple que tout le monde utilise sans même s’en rendre compte."

Pour tout comprendre sur les noms de domaines en Nouvelle-Calédonie, vous…

retamozo profile image

Nice post! would you mind to share some repos / landing where color accessibility has been achieved? thanks

nardleo17 profile image
nard Leo

Good tools!
Smart tools make users more convenient. weaver game today

Advice For Junior Developers

Advice from a career of 15+ years for new and beginner developers just getting started on their journey.