Using Color Contrast for Better Readability

Drop the white. Your clean background is creating visual friction. We tend to equate pure white with professionalism. But for a massive part of your ecosystem, that stark background is not professional. It is a strobe light. I have posted about this before. The feedback from UX researchers, designers, and accessibility advocates helped expand this landscape significantly. The clinical reality is that high contrast drains executive function. You force users to burn cognitive fuel just to stabilize the image, leaving less fuel to actually understand the content. Here is an updated guide to cultivating visually accessible digital environments. 1/ The Strobe Light (Stark White) → The Code: #FFFFFF → The Issue: For the 14% of the population with Scotopic Sensitivity, high contrast black text on pure white causes text to vibrate. It acts as an optical strobe light, washing out the letters. → The Environment: Pair this stark hex code with harsh fluorescent office lighting, and you actively trigger visual migraines and severe optical drag. 2/ The Deep Shade (Pure Black) → The Code: #000000 → The Issue: Dark Mode is not a universal cure. For the 33% of people with astigmatism, pure black backgrounds cause halation. The text becomes fuzzy, bleeds into the dark, and forces the eyes to overwork just to focus. 3/ The Soft Sun (Optimal Contrast) → The Standard: The British Dyslexia Association explicitly recommends avoiding bright white. You want soft, not stark. → The Metric: Accessibility experts note that an ideal luminance contrast ratio sits between 7 to 1 and 15 to 1. Going over 15 to 1 becomes difficult to tolerate. 4/ The Solarized Upgrade → The Codes: Background FDF6E3 with Text 657B83. → The Science: Lowers contrast gain. It mimics reading on a sunny afternoon rather than staring into a flashlight. 5/ The Sepia Upgrade → The Code: Background F4ECD8. → The Science: Provides a cozy warmth that reduces blue light exposure and relaxes the ciliary muscles in the eye. 6/ The Cream Upgrade → The Codes: Background FFFFE5 or FAFAFA. → The Science: Replaces the harsh #FFFFFF and #000000 with a gentle off white. Reduces glare while preserving a familiar paper feel. This is a standard recommendation for dyslexic readers. 7/ Expanding the Ecosystem → The Goal: Normalize customization. The goal is never to force everyone into a sepia box. → The Practice: Build websites that respect custom user style sheets. Ensure your contrast choices do not break screen reader compatibility. Empower user agency so individuals can adjust the lighting for their own specific neurobiology. White space is important. But it does not have to be white. Check your recent slide deck or website. Are you planting visual friction, or are you cultivating flow?

That "clean, minimal" form design you're proud of? Some of your users can't see it at all. Light gray borders on white backgrounds. Subtle focus indicators. Ghost buttons with barely-there outlines. These design choices look sleek to you, but they're completely invisible to people with low vision, color blindness, or anyone squinting at their phone in bright sunlight. WCAG 1.4.11 (Non-text Contrast) exists because if someone can't see where to click, focus, or type, your design isn't minimal - it's missing. This carousel breaks down what non-text contrast actually means, who it helps, and how to fix it without abandoning your aesthetic. #Accessibility #WCAG #WebDesign #UXDesign If you prefer your content as text, read on: Is your 'minimal design' actually invisible? What is WCAG 1.4.11? User interface components and graphical objects need enough contrast against their background. This includes: form inputs, buttons, focus indicators, icons, and charts and graphs. All should have at least a 3:1 contrast ratio. Why it matters This guideline helps people with low vision and color blindness who need stronger visual cues to identify what's interactive. Anyone using a screen in bright sunlight, working on a budget laptop with a dim display, or dealing with aging eyes benefits from better contrast. Common Mistakes • Barely-there borders on form fields (the #1 offender) • Subtle focus indicators that blend in • Ghost buttons with low contrast borders • Icons that almost match the background These patterns might look 'clean' to you, but they're invisible to some users. If people can't find where to click, focus, or type, your design isn't minimal - it's missing. What doesn't need 3:1 contrast? • Inactive or disabled components don't need 3:1 contrast • Decorative graphics and text get a pass, too. • Logos are exempt (but it's still preferable to ensure your logo can be seen by as many people as possible) Make your UI visible • Darken borders, outlines, and icon colors to at least 3:1 against the background • Ensure visual focus indicators have contrast against both the background and the element they're highlighting • Test in grayscale to catch issues your eyes might miss in color Testing • Use browser dev tools to check colors • Search the web for an accessible contrast checker • Test with real users, automated tools can miss issues • Remember to check different states: default, hover, focus, active The bottom line If sighted people can't see your UI, they can't use it. Non-text contrast is about making sure everyone can interact with what you build. Start with your most-used components. Fix forms, buttons, and focus states first. Learn more Want more clear and actionable WCAG breakdowns? Check out wcagInPlainEnglish.com

I’m back with another accessibility tip - checking color contrast isn't as complicated as you might think it is! Maybe you've heard accessibility people (or design people) talk about it, and maybe you didn't know what it meant. This post will give you some info and tools so you can start checking it! Contrast is usually talking about the difference between the color in the background and whatever is on it. That’s often text, and it can be other things like an icon or the border of a form field. You don’t have to learn any type of formula - there are lots of tools that can do the calculation. If you don’t have the color codes you can use an eyedropper tool to figure out what they are. I use a browser extension called ColorZilla to find colors. Or sometimes I take a screenshot, open it in Paint (yes, that Paint), and use the eyedropper tool in there. It works! Once I have the color codes I go to a contrast tool. My favorite is the WebAIM Contrast Checker, but there are lots you can pick from. After you input the colors (most allow hex codes or RGB) a score will come up. It tells you what the contrast ratio is, which can be anywhere from 1:1 (a color with itself) to 21:1 (black with white). And most tools will tell you whether it passes for accessibility and what levels it passes for. Low contrast is one of the most common issues I come across, and it’s also something designers have influence over. Having high contrast makes it easier for everyone to use your site or app, whether they’re outside when it’s sunny, trying to do something in a hurry, or have low vision. And it isn’t a restriction to creativity. You don’t need to use pure black with pure white for everything (or anything - it can give people migraines because it has too much contrast)! Using high contrast color combinations gives a more reasonable set of options instead of having literally every single combination possible. And it makes a big difference for a lot of people! Tools for checking color contrast: - WebAIM Contrast Checker - https://lnkd.in/e6D6xNEb - ColorZilla Chrome extension (color picker) - https://lnkd.in/eRNppj48 - Colour Contrast Analyzer (CCA) - https://lnkd.in/e_kAgShu - Deque Color Contrast Analyzer - https://lnkd.in/es_jYnDD - Figma Color Contrast Checker - https://lnkd.in/euK_Uk_i - Coolors Contrast Checker - https://lnkd.in/eZbRkHi8 - Colour contrast checker - https://colourcontrast.cc Accessible color palette generators: - Accessible color palette generator from Venngage - https://lnkd.in/eHACA3Jm - Accessible Palette: - https://lnkd.in/eyDmdx-d - Accessible color palette builder - https://lnkd.in/eybwTXxg 

If you’re new to the complexities of color accessibility standards — like I was at the start of this project — here’s a distilled cheat sheet that can help you make the most of our new tool in Figma. We know this can be a bit daunting at first, so we put a lot of care into this feature, trying to make it as simple as possible for you. Whether you’re brand new to this concept, or a seasoned a11y pro, you can start leveraging this right away. Here are the basics: → Strong color contrast makes your designs more inclusive by improving readability for users with visual impairments. → A contrast ratio is simply the foreground compared to the background, the higher the number, the higher the contrast, the more inclusive it is. This ratio is automatically calculated in real-time and displayed in the top left corner of the color picker. → We built everything using the WCAG 2.2 standard, which is widely accepted and most commonly used. That standard has categories and levels defined, which are available to you in the settings menu. → Figma will automatically detect the appropriate category of the layer you have selected, but you can override this if you need to from the settings menu. → Level AA is good for most projects, and is the Figma default. → Level AAA is considered above and beyond, and is good for projects that have enhanced needs. → Large text is considered at least 24px or Bold 19px. → Normal text is considered below 24px or Bold 19px. → Graphics are considered icons, controls, and other elements that have meaning. (BTW Level AAA does not exist for this category, so if you see your level changing on you, this is probably why.) → You’ll see AA or AAA in the top right corner, alongside a pass/fail icon. This is your stable place to find the status at any point. → You’ll see a pass/fail boundary line on the color spectrum, use this as a visual aid to choose a color that meets your goals. → You’ll also see a dotted pattern on the color spectrum, this is the fail zone. If your color is in this area, you can click on the fail indicator in the top right corner to auto-correct it to the nearest passing color. → If you need to know the background color that was auto-detected, click the contrast ratio in the top left corner to open a flyout with more color info. We blend together any transparent background elements as well, so this value may be technically undefined in your file, but we’ve done it this way to be as accurate as possible to what you see on the canvas. → In more complex layer structures (such as overlapping elements), or complex color scenarios (such as multiple colors, gradients, or images), the calculations may not be possible. If you find that’s the case for your design, we recommend duplicating and isolating the foreground and background elements you want to evaluate onto a clean part of the canvas. Let us know if you have questions, and happy contrasting!

1 in 12 men can’t see your design. And you’re still using red for errors. There’s a real chance your user can’t distinguish between your success green and error red. Yet most design teams still treat colour blindness like an edge case. It’s not. Here’s the simplified breakdown every designer should know: 1. Red-Green (Deuteranopia & Protanopia) - 1st Priority Affects ~8% of men, ~0.5% women. Users struggle to distinguish: • Red vs green. • Brown vs green. • Orange vs red. What to do: • Never rely on red/green alone for success and error states. • Pair every status with text and an icon (✓ ✗ ⚠). • Ensure colours differ in brightness and contrast, not just hue. • Meet contrast requirements: 4.5:1 for text, 3:1 for UI components. If you only fix one thing, fix this. 2. Blue-Yellow (Tritanopia) - 2nd Priority Very rare (~0.01%), but still worth checking. Users struggle with: • Blue vs yellow. • Blue vs green. • Purple vs red. What to do: • Avoid pairing blue/yellow for critical states. • Don’t rely on blue vs green to indicate meaning. • Add icons and text to “info,” “warning,” and “alert” states. • Maintain strong brightness contrast. Red/green works fine here. 3. Monochromacy - 3rd Priority Extremely rare. Users see only in grayscale (no colour perception). What to do: • Rely on contrast, not hue. • Use text labels, icons, patterns or structural differences. • Never use colour as the only indicator for meaning. If your design works in grayscale, you’ve already covered this. Here's a guide your team can use: ✅ DO • Add icons or labels to all colour-coded states. • Use contrast differences ; at least 4.5:1 for text, 3:1 for UI components. • Test with simulators (Stark, Colorblind, Who Can Use). • Ask yourself: “Does this work in grayscale?” ❌ DON’T • Use colour as the only indicator. • Rely on red/green for critical actions. • Skip accessibility testing. 👇🏽 What’s your experience with colour blindness? Drop your thoughts in the comments. ♻️ Share and save this for your team. --- ✉️ Subscribe to my newsletter for accessibility and design insights here: https://lnkd.in/gZpAzWSu --- Accessibility note: Contents in the image attached contain normal and large text ratios for WCAG 2.2 AA only.

⬛️ Rethink your use of Pure Black (#000000). Pure black on a white background often creates too much contrast, leading to "visual vibration" that can strain the eyes and reduce readability. Most modern interfaces favor "Near Blacks" to create a more natural and premium feel. Why consider alternatives? ✅ Easier to read: Lower contrast is more comfortable for long reading sessions. ✅ More depth: Dark grays make it easier to show layers and shadows. ✅ Better style: Adding a tiny hint of color (like blue or slate) makes your brand feel more unique. 🎨 Darker shades to try: Rich Black (#0A0A0A): Deep and professional without the harshness. Eerie Black (#232023): A soft, balanced dark perfect for text. Charcoal Gray (#121212): A standard choice for clean, modern dark modes. Oxford Blue (#212A37): Great for adding a sophisticated, cool-toned depth. Check the palette below, which shade fits your style best? 👇 #UI #UXDesign #WebDev #Frontend #Accessibility

My design passed accessibility checks with 7:1 contrast, while a user measured 3.37:1 on Linkedin. Both of us were right at the end, do you know how? I recently had a very interesting discussion under one of my posts and it turned into a great reminder of how complex accessibility can be in the real world. For the post, I created a graphic and checked that the color contrast of every text element is safely above the 4.5:1 minimum recommended by WCAG. Then a follower commented that some of the text was hard to read on the phone and he shared a screenshot from a contrast checker showing 3.37:1 for one of the colors. That raised an interesting question: how can a design that passes accessibility checks suddenly fail a user? There are several things happening between the moment we design something and the moment someone sees it: 1️⃣ Platform compression When we upload images to social platforms, they are usually compressed automatically to reduce file size. Compression can slightly change colors and blur the edges between text and background. If the contrast was already close to the limit, this can lower the effective contrast. 2️⃣ Image resizing The graphic I designed was quite large, but platforms often resize images for different screens, especially on mobile. When the image becomes smaller: • text strokes become thinner • edges get softened by scaling • readability decreases 3️⃣ Thin fonts + antialiasing Even with sufficient contrast ratios, thin fonts can reduce perceived contrast. When text is scaled or compressed, the browser blends text pixels with the background (antialiasing). That means the visible color becomes a mixture of text and background. Contrast tools inside design software measure pure colors, while the final rendered image contains blended pixels. 4️⃣ Screens and real-world conditions People view content on: • phones in bright daylight • different screen technologies • different brightness levels • sometimes without glasses All of this affects how readable something feels. 5️⃣ Measuring the uploaded image Another important detail: the contrast was checked on a screenshot of the uploaded image, not on the original design. That means the tool measured pixels that were already affected by: • compression • scaling • antialiasing So the measured 3.37:1 might actually be correct for the rendered version of the image. Accessibility does not only happen during design, it also depends on how the design is exported, processed by platforms, and displayed on real devices. That’s why it's helpful to: ✔ aim for contrast higher than the minimum ✔ avoid very thin fonts in images ✔ check the exported file, not only the design tool ✔ test how it looks after uploading to the platform Have you ever experienced something similar where a design technically passed accessibility checks but still caused issues for users? #WebAccessibility #Accessibility #InclusiveDesign #UXDesign #UXAccessibility #WCAG #DesignForAll

When you’re working with graphs, be judicious about how you use colors. Color is one of those visual elements that can easily become a distraction if overused, or if not handled carefully. There are ideally 4 ways you should be using colors: 🖍️ Color Gradients: Use gradients / color intensity to direct the viewer’s eyes toward specific elements or specific areas of a chart. 🖍️ Color Isolation: Emphasize certain elements by setting them apart with a "unique" color. This contrast will immediately direct attention to the highlighted part. 🖍️ Color Saturation: Use highly saturated colors for elements you wish to highlight, while reserving less saturated colors for lesser important elements. 🖍️ Color Callouts: Use colored callout boxes or annotations to accentuate particular data points or elements. This will guide attention and provide additional context to the chart. Colors are not just arbitrary choices in design; they are powerful tools for communication. So you need to use them thoughtfully in ways that it can enhance the visual impact of a design without hurting the message and causing any confusion for the audience. As Lisa Charlotte Rost, a writer for Datawrapper very accurately mentioned - "In data visualization, color is not just a tool; it's a language.”

Most dashboards fail because of bad color choices, not bad data. It took me WAY too long to understand that. We talk a lot about metrics, but the main thing that drives clarity (or confusion) is color. The colors you use in your dashboards will lead someone to the right insight, or distract them so the real story gets lost. I learned this the hard way at Disney. I worked with a data analyst there who had an uncanny sense of design. I’d build a dashboard that I thought looked great, and she’d rip it apart (constructively): “Your most important metric is blending into the background.” Or… “These two categories look the same to anyone who’s even mildly colorblind.” Or, my personal favorite, “What am I supposed to be looking at first?” Ouch. She taught me that color isn’t decoration. It’s hierarchy. Meaning. Psychology. It’s the difference between a VP nodding in agreement or dozing off while you struggle to explain your “cool dashboard.” The data backs it up, too: Color can boost retention, guide attention, and improve comprehension. But only when used intentionally. Here’s what I wish more data analysts understood: ● Color = direction. Your palette should tell people where to look first. ● Contrast creates clarity. If everything pops, nothing pops. ● Consistency builds trust. Red means bad, blue means neutral… or whatever your org decides. Just be consistent. ● Culture matters. A color that signals “caution” in one region might mean something entirely different in another. ● Accessibility isn’t optional. Colorblind-safe palettes should be the default, not an afterthought. The best dashboards I’ve seen use color intentionally. Every shade has a job. Every hue has a purpose. Good color theory makes your insights impossible to miss. What’s the biggest color mistake you see analysts make?

Had a great question from someone this week about how I handle color-blindness in my #powerbi designs. While I'm no expert, of course, and have not experienced color vision deficiency, I have had multiple business partners and customers who have educated me on the subject by pointing out different aspects of my designs that have been challenging for them to read. If you're a Power BI developer or an aspiring #datavisualization professional, it might surprise you to learn that around 8% of men experience color blindness (compared to less than 1% of women). These might seem like small numbers but they're a big deal to your audience/stakeholders if you're building a tool and they're unable to read your data visuals. Fortunately, Power BI (and other #businessintelligence/data viz tools) have a ton of formatting and customization options that you can use to support readability and accessibility in your data visuals. When I'm building a tool that has a large enough audience that I suspect this could become an issue, there are a variety of techniques I use: ✔ Crank up the contrast: Overlapping similar colors can cause problems for people who experience color perception issues and even those who don't, but contrast is safe for the vast majority of users. Balancing dark and light tones can help you "pop" important visual elements, differentiating them based on gradation rather than color. ✔ Add direct labels: Although labels can easily add unnecessary clutter to your report/data visuals, sometimes it's useful to just remove the guesswork and directly label the most important visual elements. ✔ Experiment with different formatting options: Don't get carried away, but sometimes minor formatting changes are enough to safely differentiate one visual from another. With line charts, for example, you can add markers to important lines, change up their weight between lighter and heavier gauges, or adjust their style to dotted, dashed, etc. Below are a few examples of these techniques applied to a line chart visual, the visual with which I often run into the most problems/concerns where color vision deficiency. Some of these techniques may not be practical depending on the degree of "spaghetti chart" in your visual but I've used all of the methods below to good effect. Would love to know if you have experience with other useful techniques or, to flip the script, what your experience is like designing Power BI tools if you have to experience color blindness as a developer.