Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
accessibility color

10 Articles
{
,

}
Direct link to the article Programming Sass to Create Accessible Color Combinations
accessibility accessibility color high-contrast

Programming Sass to Create Accessible Color Combinations

We are always looking to make the web more accessible. Color contrast is just math, so Sass can help cover edge cases that designers might have missed.
Avatar of Jason Hogue
Jason Hogue on Mar 12, 2020
Direct link to the article Understanding Web Accessibility Color Contrast Guidelines and Ratios
accessibility accessibility color high-contrast

Understanding Web Accessibility Color Contrast Guidelines and Ratios

What should you do when you get a complaint about the color contrast in your web design? It might seem perfectly fine to you because you’re able to read content throughout the site, but to someone else, it might be …

Avatar of Stacie Arellano
Stacie Arellano on Mar 4, 2020
Direct link to the article The Best Color Functions in CSS?
accessibility color color hsla lab

The Best Color Functions in CSS?

I’ve said before that HSL is the best color format we have. Most of us aren’t like David DeSandro, who can read hex codes. HSL(a) is Hue, Saturation, Lightness, and alpha, if we need it.

hsl(120, 100%, 40%)

Hue …

Avatar of Chris Coyier
Chris Coyier on Jan 20, 2020
Direct link to the article A Whole Bunch of Places to Consider Contrast in a Single Paragraph
::selection accessibility accessibility color

A Whole Bunch of Places to Consider Contrast in a Single Paragraph

When we’re thinking about choosing colors in design, we’re always thinking about accessibility. Whenever colors touch, there is contrast and, if we’re talking about the color contrast of text, it needs to be high enough to be readable. This benefits …

Avatar of Chris Coyier
Chris Coyier on Jan 3, 2020
Direct link to the article WhoCanUse
accessibility accessibility color

WhoCanUse

Direct Link

There are loads of microsites and developer tools for looking at color accessibility, including tools built right into browser DevTools. They often show you if a color passes AA or AAA WCAG guidelines. But color contrast is more complicated than …

Avatar of Chris Coyier
Shared by Chris Coyier on Dec 4, 2019
Direct link to the article Designing accessible color systems
accessibility accessibility color design systems

Designing accessible color systems

Direct Link

The team at Stripe explores how they’re refining their color palette to make it more accessible and legible for users across all their products and interfaces. Not only that but the team built a wonderful and yet entirely bonkers app …

Avatar of Robin Rendle
Shared by Robin Rendle on Oct 21, 2019
Direct link to the article Color contrast accessibility tools
a11y accessibility color color color-adjust

Color contrast accessibility tools

Accessibility is all the rage these days, specifically when it comes to color contrast. I’ve stumbled upon a couple of tools this week that I think are pretty nifty for helping make sure that all of the text on our …

Avatar of Robin Rendle
Robin Rendle on Jan 2, 2020
Direct link to the article CSS Variables + calc() + rgb() = Enforcing High Contrast Colors
accessibility accessibility color calc css variables custom properties rgba

CSS Variables + calc() + rgb() = Enforcing High Contrast Colors

As you may know, the recent updates and additions to CSS are extremely powerful. From Flexbox to Grid, and — what we’re concerned about here — Custom Properties (aka CSS variables), all of which make robust and dynamic …

Avatar of Josh Bader
Josh Bader on Oct 18, 2019
Direct link to the article Re: Pleasing Color Palettes
accessibility color color generative color

Re: Pleasing Color Palettes

There are so many tools out there to help you pick colors. I totally get it! It’s hard! When colors are done well, it’s like magic. It adds a level of polish to a design that can really set it …

Avatar of Chris Coyier
Chris Coyier on Jan 11, 2019
Direct link to the article Creating a VS Code Theme
accessibility color color editor theme vs code

Creating a VS Code Theme

Everyone has special and perhaps, particular, tastes when it comes to their code editor. There are literally thousands of themes out there, and for good reason: a thing of beauty and enhancement to productivity for one can be a hindrance …

Avatar of Sarah Drasner
Sarah Drasner on Jun 8, 2018
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top