Skip to main content
CSS is fun and cool and I like it.

Articles Tagged high-contrast

It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
5 Articles
{
,

}
Link

Quick Tips for High Contrast Mode

Avatar of Chris Coyier
Shared by
Chris Coyier

Sarah Higley has some CSS tricks up her sleeve for dealing with High Contrast Mode on Windows, which I learned is referred to as WHCM.

Here’s the first trick:

[…] if the default CSS outline property doesn’t give you the visual effect you want [in WHCM] for focus states, there’s a very simple fix. Instead of overriding default browser focus styles with outline: none, make it transparent instead: outline 3px solid transparent.

That will essentially do nothing outside … Read article “Quick Tips for High Contrast Mode”

Our Notes   /   Read at sarahmhigley.com
Link

The Contrast Triangle

Avatar of Chris Coyier
Shared by
Chris Coyier

Chip Cullen:

Let’s say you’re building a site, and you’re working with a designer. They come to you with some solid designs, and you’re ready to go. You’re also a conscientious front end developer and you like to make sure the sites you build are accessible. The designs you’re working from have some body copy, but you notice that the links inside the body copy are missing underlines.

You are now in The Contrast Triangle.

… Read article “The Contrast Triangle”
Our Notes   /   Read at chipcullen.com
Article

Programming Sass to Create Accessible Color Combinations

Avatar of Jason Hogue
Author
Jason Hogue
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.
Article

Understanding Web Accessibility Color Contrast Guidelines and Ratios

Avatar of Stacie Arellano
Author
Stacie Arellano

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 a totally different experience. How can put yourself in that person’s shoes to improve their experience?

There are some relatively easy ways to test contrast. For example, you can check the site on your phone or tablet in bright sunlight … Read article “Understanding Web Accessibility Color Contrast Guidelines and Ratios”

Article

Accessible SVGs in High Contrast Mode

Avatar of Eric Bailey
Author
Eric Bailey

Making your SVG accessible includes adding extra steps to your workflow, but is well-worth it. By embracing clean, semantic markup and taking advantage of some of the less well-known features of CSS, you can create easily maintainable solutions that include considerations for low vision, a condition that affects a not-insignificant amount of the population.

Rather than writing and maintaining complicated and brittle state-managing Javascript, work with existing browser capabilities such as media queries to easily make the experience accommodate … Read article “Accessible SVGs in High Contrast Mode”