Following up on a question asked here regarding contrast ratio requirements for WCAG AA, I'm trying to figure out the best solution for a conflict between WCAG guidelines and the corporate identity guidelines of the product I'm designing for.
Throughout the product's UI, the brand's primary color is mostly applied for buttons. The combination of light text with the brand's primary color results with insufficient contrast ratio. For achieving sufficient contrast, I tried darkening the button label text color or the background color of the button (see attached screenshot). However, changing the color of the brand won't be an acceptable solution for various reasons.
Apart from using dark text for button labels, how else could I achieve sufficient contrast ratio without modifying the brand's primary color?
You can't achieve sufficient contrast for AA level without changing the background color, or using a darker text.
In order to find the good matching color, you have to convert your color to HSL color space instead of RGB. Then conserving the Hue and Saturation you can change the luminosity and test the color.
This way you can find a color like #0F7FAD which will match your initial color, just being a little darker.
I empathize with you, I've struggled many times with trying to meet A11Y guidelines and design language / brand guidelines at the same time. It's not a battle that's easily or quickly won, but I applaud you for working to make the web more inclusive!
An option that has pushed the conversation further for my team in the past was to allow the end-user to choose the version of the site that they need or wish to use.
Do they want high-contrast styling?
Build an option in to replace the stylesheets - and apply the brand colors in different methods.
Other questions that may fit in to the topic area:
Do your users want enlarged or generously spaced text sizes?
What about enlarged UI elements?
How about a colorblind set of stylesheets?
TLDR: UI's are most often not one size fits all, so think about tailoring accessibility offerings in an a-la-carte manner. Let the consumer choose what they need!
Hope this helps, let me know how it's going!
Related
What kind of algorithms are used to set color profiles on image within Lightroom. For example, you can build a color profile from a MacBeth chart with ground truth colors and apply those to a new image and the new image will appear according to the profile.
EDIT: To clarify as requested. I am specifically interested in programmatically reproducing the sort of features found in adobe Lightroom or photoshop that enable users to adjust the color of a given image based on a supplied color profile. If you don't mind, this video demonstrate precisely what I'm talking about:
https://youtu.be/C67X_09FeTY?t=170
As you can see, based on the supplied Macbeth chart, a profile can be built to adjust the color in an image. I'm looking to get a better idea of what the underlying algorithm is that makes this happen.
I created an interactive treemap where the severity of broken links in areas of a web site, shows using various shades of red. If there are zero problems, boxes appear as green as "all clear." I include a data table as a text equivalent, but I was asked to make the chart more usable by people who are colorblind. I looked for a colorblindness simulator that would help me pick shades of blue or something, because red-green is a particular problem, BUT I don't know how to judge.
Can anyone point me to how to add different textures, fill patterns, to treemap boxes, or how to add box borders whose width is based on my problem severity parameter (here, the count of broken links)? The change would need to be added interactively. These were two of the suggestions I received; perhaps there are other solutions?
Visualize and Accelerate Web Site Repairs:
http://bl.ocks.org/wendlingd/af1e751e97c5211ff11277c985e5e642
It‘s always fair to have two different characteristics on things that are important to be distinguished. That‘s why links receive different color and underline by default.
I think it‘s a good idea to use hatching as a second characteristic. So you could add e.g.
background-image { repeating-linear-gradient(
55deg,
transparent,
transparent 15px,
rgba(255,255,255,.5) 15px,
rgba(255,255,255,.5) 20px
); }
to your boxes and fiddle around with angle and pixels for different box types.
Could look like this in the end:
Most importantly, please increase font / background contrast! This will help visually impaired more than all hatching…
Hatching was taken from http://lea.verou.me/css3patterns/#diagonal-stripes
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
Is there a way to test if a GUI is usable for color blind person?
I know that it has many degrees and I guess that's why simply doing a screenshot in black & white is not the best way to test the usability of a GUI for a color blind person. What is the best way or best tool to do it?
Search for color blindness simulation tools on the net. You will find for example
Sim Daltonism (Mac OS X): http://michelf.com/projects/sim-daltonism/
Colorblind Web Page Filter (Web): http://colorfilter.wickline.org/
15 Tools If You Are (Not) Colorblind: http://www.colblindor.com/2008/12/23/15-tools-color-blindness/
you can change the color of your screenshots using this website: http://www.vischeck.com/daltonize/
Remember that a colorblind person doesn't necessarily see the world in black and white but rather some colors change their appearance. There are several different kinds of color-blindness out there and each looks different. Here are some images illustrating the different variants. For the most part it's either reddish or greenish tones that are affected, while most of the time blue colors remain what they are.
You can try out how your UI looks to various color-blind persons with this tool for example.\
The Windows User Experience Guidelines also cover color with respect to color blindness.
I was told by one of my users that his sight disability requires him to use the High Contrast Black setting. So what I do to test that my program will appear fine to sight impaired people (including various types of color blindness), is to temporarily change to that setting.
Sample of High Contrast Black http://www.digitalexpedition.com/main/assets/images/HighContrastBlackTheme.jpg
To do so in Windows XP, go to Accessibility Options in the Control Panel. On the Display Page, click "Use High Contrast" and from the Settings button select: "High Contrast Black (large)".
The procedure is similar with Windows Vista.
I found a number of colors needed adjusting when I did this. When going back to normal viewing mode, the result was slightly higher contrast but not too noticeable changes for normal sighted viewers, but better contrast for color blind and other vision impaired users.
If this still doesn't help a person with a particular form of color blindness, I would then recommend they try using High Contrast Black as their normal option, since they're missing out on more than just my program.
To test a web page for colorblindness accessibility, you can try out:
http://colorfilter.wickline.org/
There are a number of tools listed on this site that provide a filter or a way of looking at your website/application/etc. as if you were colorblind. This is a very simple way to test and does not require you to find every color-blind type individual out there (as there are different levels of color blindness).
Technically, there is really no way in which you could do this other than to use a black and white interface. There are many different types of color blindness and there are varying degrees to each of those types (I happen to have Tritanomaly, which means that I have difficulty with the entire spectrum of Blue). There is a decent Wikipedia article about clorblindness(Color blindness)that describes the differences. There are plenty of websites that offer different ways of designing for the color blind, but in actuality, it is difficult to make something look good to color normal people that would also be visible to color weak/blind people. Go with Black and white and it will look good for everyone (think I-tunes).
Color Oracle
It's for Win/Mac/*nix. It takes the image that is currently shown on your screen and applies a colorblindness filter, so that you easily can see how it looks, without having to capture screenshots and use photoshop to do the filtering. You can even assign a hotkey so that you instantly can see it. Best of all it's free.
Colorblind Vision
iPhone app for realtime simulation of colorblindness. I wrote it as my first iOS program.
I just found from Futjusu "Color Doctor" that can display website in 4 modes of color blind: Color Doctor.
There is a cool iPhone app called Simulate that will allow you to take a screen-shot or a photo to see how things look. It also includes sample images that really let you see how things might appear to a color-blind person.
I've been using Color Oracle on OS X but just bought xScope today because it's on a 30% discount and also has a ruler, guides and a color picker among other tools.
I have an text outline tree where i display a lot of information There are already upto three icons for each item (one in front, one after the text and one at the left side). But i still need to show more.
So i used different text colors. Unfortunately only the red=stop,forbidden,protected and green=okay,valid,allowed is so universal known. I mix it with black/blue which stands for none available information items.
My question is: Do red/green blind people recognize the difference of this colored texts?
I don't really care about real color blind people as they are in the 0,001% range while red/green blindness is serious high in the one digit percent range.
EDIT:
I heared from someone that he is red/green blind and is able to tell me if this is a green text or a red text and only if this is a real mixed color salad they are not able to differenciate between it. So the question is: are text items in a GUI list/tree so far away from each other that red/green blinded people can see them as different shades in whatever color they see.
NO, we do NOT see the difference!
I worked at a company that used red/green for information regularly, and it was very confusing.
But, do as they do in traffic lights, and add a little blue to the green color.
FF0000 and FF00CC is easy to tell apart (for me, at least).
Also, its easier to tell larger text/things apart. Small pixels or pixel-thin lines are harder to see the color on.
Red/green alone is bad for this reason. My boss actually has red/green colorblindness, so he points out anytime we mess up and he can't distinguish something.
Consider an:
outline box (eg dashed)
Background color
text bold/not bold
Yet Another icon
A variation or overlay on an existing icon
A mouseover hint (title)
A mouseover is actually a generally useful thing - while an icon may be intuitive to you, it might not be to someone using your app for the first time.
I agree with the suggestion to make it black-and-white to try it out- though there's also a couple Firefox extensions that do this: https://addons.mozilla.org/en-US/firefox/search?q=colorblind&cat=all -- unfortunately, none seem to be updated for 3.5.
Colors may give cues, but they should not be the only way to find that information.
Personal
I have a red/green deficiency, here are some of my experiences. Keep in mind color vision is very individual even among normal-sighted people. Some of that may be true in general.
Telling colors apart is easier than identifying colors
closeby large areas are easier to tell apart
Trying to tell colors is strenuous, it's less of a cue, more of a task
(i.e. color coded UI exhausts rather than helps me)
I can tell RGB(255,255,0) from RGB(0,255,0) and ident when they are side-by-side,
and can tell you "which is greener". However, I can't play most puzzle games that
use these for color-coding pieces.
Mixed colors give the most problems.
An intern was once confused by my problem, because the desktop background - some paintshop landscape - was all pink. I didn't know.
Imagine a list control (like an windows explorer file list) where file names are black, red or green:
telling red apart from black is hard. I usually don't notice until someone tells me. Even on decent TFT's, from a slight angle they wash. I can identify correctly if someone tells me "some of these are red" and I look hard.
I once deleted 3 days of work because I failed to notice that the list of files on the left was red not black (this was a font with 2 pixel line width!).
having a single red or green item among black ones, it's hard to tell whether it's red or green.
People deal differently with defects, and though I've never found a color vision deficient person to be ashamed or hiding about it, we still don't like to have it rubbed in. Some people, incidentally, get very argumentative because they can't imagine I can tell apart X and Y easily, but not X and Z. My best way to quiet them is to ask them to explain the color "blue" without using any color names.
General thoughts
Well chosen colors make valuable cues, improving UI transparence immensely. Don't stop using them for good - just allow people who don't see them easily to still use your software.
Allow customization of colors, and provide color schemes to pick quickly. I really don't want to select 14 individual colors.
Using slightly-off colors often looks much more professional than the "primaries" (one or two channels at 255, the last at 0).
Color perception differes a lot. What looks good to you on your monitor might suck everywhere else.
First, there's color reproduction of the monitor - they have huge differences in linearity, balance and isotropy. Unless you use the same brand from the same batch, or use properly calibrated professional monitors, they make for the biggest difference.
Second, is your sensors. There's an about 40/60 distribution among people of red perceptors working at different wavelengths. There are many more subtle personal differences.
Third, it's your brain. A lot of color perception is learned and affected by cultural background. see e.g. here.
7% of American men have some form of Red-Green color blindness. The rate among women is much lower. Incidence rates in other countries vary, but part of that is due to the low rate of diagnosis.
So, for the sake of ADA-compliance and conformance with UI best practices, don't use red and green colors alone as an indicator.
Also, no one wants to use an application that looks like angry fruit salad.
Could you maybe use bold/not bold/<span style="color:silver">grayed out<span> instead? (Sorry couldn't make the text silver colored.)
I agree with a great deal of what you say.
Red and Green are a very recognizable combination in terms of meaning.
In terms of colour blindness, the shades of green and red differ greatly in how "bad" they are. If you want to make sure you have a usuable UI look at it in black and white. (I take a screenshot and give it 20 seconds in Photoshop.)
If you can use what you see, move on. Otherwise, address the problems.
Kindness,
Dan
I have a couple of pet projects where I'm the sole designer/programmer and I spend too much time changing the user interface to make it easier to use by real users and avoiding bright yellow and green that is so common on "programmer" designs.
Do you have tips to choose a color scheme when you do not have a graphics designer around? How do you avoid creating the typical "programmer" interface?
kuler has a lot of user submitted colour schemes
edit: just remembered... also try colorlovers
Let me tell you a story.
I have absolutely no confidence in my ability to make aesthetic choices - you only have to look at the way I dress to realize I'm justified in my lack of confidence. Anyway, years ago I was put in charge of writing the gui for a new product (the "Clip Editor" in Cineon, for anybody who knows that). I sketched out a design, but asked my boss, the head of sales and marketing, and various "application specialists" for help choosing the colours. Nobody responded, so I said "to hell with it", and chose a colour scheme so ugly I'm sure the beta testers would recoil in horror and demand a change. But they didn't - so it shipped with it. And I heard that customers loved the "bold colours". And not only that, but a few years later a competitor added a program that looked like a direct rip-off of my Clip Editor to their product, and they copied my colour scheme!
For desktop apps, get the colors from the OS. I, personally, want all of my apps to look and feel the same as my OS.
For web apps, I'm not really sure.
Keep in mind that nearly 10% of the male population of the world have some significant form of color blindness. You should always consider this when choosing interface colors (especially if you need capital - guess what? 1 in 10 male investors might not see your red dots on the green background chart showing risk vs return!).
MSDN has a reasonable overview of this, and there are several website filters that show you what your site (or any site) looks like given any form of colorblindness.
Aside from that, I really like COLOURLovers - not only do they have a great selection of user tagged and defined color schemes, they give them to you in a variety of ways, and you can sign in and track your favorites (or your favorite color scheme producers).
Go check out the fall themes! Can't go wrong with Michigan colors when the leaves change...
-Adam
Colour guides like Kuler are a great start if you have no idea about choosing colours.
Some basic considerations:
Use contrast not colour to differentiate in your design. This is to accommodate colour-blindness and poorly sighted users.
Use as limited a colour palette as you can. Pick one colour as your 'theme' and choose shades of that colour, and then maybe one or two contrasting colours to go with it.
Get advice - doesn't have to be from a designer, you might still know someone who has a good eye for these things. Also, more broad feedback - ask a few people for their opinion, that can help.
Lately I have been using the following website: http://www.nickherman.com/colormatch/
to help me (also a non-designer) pick matching color schemes. I usually find a color that is fairly pleasing, then use the matching colors from this website.
If all else fails, I also ask my wife!
I like using ColourSchemer and EasyRGB.
Some updated resources I use:
Colorotate.org is a nicely designed site with user-contributed palettes of various sizes (unlike kuler that provides only 5 colours per palette). It allows you to see how the combinations look to various type of color-impaired people.
colorschemedesigner.com generates consistent palettes for you using various algorithms (complement, triad, tetrad...)
Adobe's Kuler website has a lot of user-created color schemes uploaded by designers. I normally search for higher ranked schemes first.
There are a lot of "color theme pickers" on the web. If you use these, your colors will at least look like they belong together. The first one I looked at on google: http://www.yafla.com/dforbes/yaflaColor/ColorRGBHSL.aspx?
Aim for pastel colours that are slightly dimmer than their full-blown counterparts, i.e. a pastel red is dimmer than a (255,0,0) red for example. Try to select colours from the same palette, one cheaty way of determining colour schemes I use is to take a screenshot of an Office 2007 app, usually excel, and paste out some colours from their co-ordinated palettes using the colour dropper tool in an app like Paint.NET. In fact this cheaty approach to be extended to 'borrowing' colour schemes from applications that are already out there that have colours schemes you admire :-)
If you pick a "theme" color for your app, you can use Kuler to help flesh out the palette.
Related post:
Web 2.0 Color Combinations
I know I've seen more, but can't find them :)
I tend to use alot of grays, along with black and white, keep things simple and avoid any kind of annoying, bright colors. Seems to me like that's what the SO guys did.
Vitaly Friedman's Essential Bookmarks for web designers & web developers list a lot of online color tools, also a condensed version
There is also a list of color tools on twiki.org that has some additional sites.
I recommend you start by reading up on computational color theory. Wikipedia is actually a fine place to educate yourself on the subject. Try looking up a color by name on Wikipedia. You will find more than you expect. Branch out from there until you've got a synopsis of the field.
As you develop your analytic eye, focus on understanding your favorite (or most despised) interface colors and palettes in terms of their various representations in different colorspaces: RGB, HSB, HSL. Keep Photoshop/GIMP open so you can match the subjective experience of palettes to their quantifiable aspects. See how your colors render on lousy monitors. Notice what always remains readable, and which color combos tend to yield uncharismatic or illegible results. Pay attention to the emotional information conveyed by specific palettes. You will quickly see patterns emerge. For example, you will realize that high saturation colors are best avoided in UI components except for special purposes.
Eventually, you'll be able to analyze the output of the palette generators recommended here, and you'll develop your own theories about what makes a good match, and how much contrast is needed to play well on most displays.
(To avoid potential frustration, you might want to skip over to Pantone's free color perception test. It's best taken on a color calibrated display. If it says you have poor color perception, then numeric analysis is extra important for you.)
Why do programmers think they can't have dsign skills? It's a pet peeve of mine. It's a learnable skill, just like anything else.
http://www.hackification.com/2010/05/16/designing-a-vs2010-color-scheme-consistency-consistency-consistency/