49
votes
Accepted
Color picker - what to do if the user selects the same color as the background?
You could try adding a transparent black or white border on the inside of the coloured squares. This will look okay for most colors.
One drawback of this solution is that the border will be noticeable ...
41
votes
Accepted
Formula for color contrast between text and background
Yes there is a formula. I wrote an article on high contrast colours recently that charts the variation of black or white (actually off-white #f0f0f0 and off-black #101010) as the foreground colour ...
38
votes
Accepted
Do Samsung's Marshmallow skin Quick toggles have enough contrast?
In short, NO, they do not have enough contrast.
According to Web Content Accessibility Guidelines (WCAG) they mostly do not have enough contrast. Only 1 out of 8 tests gets a pass.
But the dark blue ...
24
votes
Accepted
What should a well-designed high contrast function do?
Do more research. Asking one person will only get you that person's preference - Ask lots more people and look for patterns in the results.
The RNIB (UK organisation for blind and partially sighted ...
19
votes
Accepted
Change link color based in background color?
Comparing the saturation and brightness of white to yellow:
There is a difference of +25 in saturation and -5 in brightness
If blue has S=65 and B=100, the resulting blue would be:
S 65 + 25 = 90
B ...
16
votes
Change link color based in background color?
Use Google inspector, they suggest another color that passes AA and AAA
AA : #217387
AAA : #185564
What is AA and AAA ?
These are compliance levels to make digital content more accessible provided by ...
15
votes
Color picker - what to do if the user selects the same color as the background?
One working solution I found on my own was to add a "ring gradient" to the edge of each color, like this:
This complimented the shadows in boosting necessary contrast, and the fact that it'...
12
votes
Accepted
Maximum contrast ratio for good accessibility
More Contrast Generally Better
There are no general standards for capping contrast for either day or night displays. Generally, the higher the contrast, the easier the reading in both cases (Parker &...
10
votes
Color picker - what to do if the user selects the same color as the background?
Google doesn't care:
They possibly assume that anyone savvy enough to know they need to pick a color will understand that the color they pick might match the background.
MS Paint has a gray left and ...
9
votes
What should a well-designed high contrast function do?
Think of high contrast text and using more than just color.
There are a lot of accessibility guidelines out there. I'll mention two examples that I have come across in projects before. Check the ...
8
votes
Formula for color contrast between text and background
You should choose the text color such that success criterion 1.4.3, Contrast (Minimum), of WCAG is met. It turns out that the required contrast ratio of 4.5 can be met with any choice of background ...
8
votes
WCAG 2.0 color contrast - How strict do you need to follow?
Well, either you follow the rules or you don't. You have to choose if the trade off of "nice look" vs "accessible" is of value for you. Personally, I always think objective data is usually better than ...
7
votes
Accepted
Is there a standard color list to keep adding new colors to a plot while retaining old colors?
color brewer is designed for maps but it will give you colours that are optimised to be as differentiable as possible.
It has a maximum of 12 colour classes
7
votes
What are the negative and positive aspects of dark color scheme?
One advantage of light text on a dark background is that different colours in the text are easier to distinguish.
That might not be important to most readers, but one type of user who makes heavy use ...
6
votes
Do Samsung's Marshmallow skin Quick toggles have enough contrast?
Your device is not stock Android.
That theme will be something that is set by your device manufacturer and not by Marshmallow/Google.
I agree that the colours are very pale and would be difficult ...
6
votes
Is high contrast mode really useful?
After a brain injury, I had continually evolving difficulties with eyesight. Initially, inflammation changed the shape of my eyes and caused images to be out-of-focus. A larger font was helpful.
...
5
votes
Accepted
Mostly white screen (8 hours per day)
On a personal level you could reduce contrast / brightness on your monitor.
Re the UX question there are numerous studies regarding reading legibility. Early screen designs had far less contrast than ...
5
votes
Color picker - what to do if the user selects the same color as the background?
Use a border with a high contrast opposed to the background color. It doesn't hurt the accessibiltiy if the inner content (chosen color) has a low contrast opposed to the border, but it hurts the ...
5
votes
Accepted
Are contrast checkers really accurate?
No, you're right—the WCAG 2 colour contrast algorithm is not a very good representation of the way humans actually perceive contrast. Perhaps the most prototypical example is the colour of a text ...
4
votes
Is high contrast mode really useful?
Yes...a thousand times...yes.
I am visually impaired and my impairment manifests itself in what is called low contrast sensitivity function. Put text on a white background and I simply cannot read it....
4
votes
What should a well-designed high contrast function do?
To add to the above answers.
Contrast is not the only thing to keep in mind:
1) Is your website ARIA friendly? Can it be easily browsed through a screen reader?
2) Is it responsive or developed in ...
4
votes
Contrast ratio for button background color?
Both pass colour contrast test ..check here:
http://leaverou.github.io/contrast-ratio/#%230000ff-on-%23fcdb31
http://leaverou.github.io/contrast-ratio/#%23fcdb31-on-%230000ff
But, if you ask me as ...
4
votes
WCAG 2.0 color contrast - How strict do you need to follow?
My issue is that I just don't understand how based on the rules, that
black text is better on the purple than white.
This is to do with the varying types of colour blindness and if people with ...
4
votes
WCAG 2.0 color contrast - How strict do you need to follow?
"How strict should I follow the WCAG?"
1 You do not have to follow it at all if you do not want to, depending on what industry you are in, as there are discrimination laws though those are usually ...
4
votes
Looking for research regarding pure black vs dark gray for readability
High contrast and dyslexia
True black, especially on pure white, can appear as blurred or moving for dyslexic people.
There’s a reason the text you’re reading now is not pure black (#000000), and ...
4
votes
Maximum contrast ratio for good accessibility
There're no maximum contrasts in WCAG as it's more focused on those with difficulty processing the differences in background and foreground information (either audio, or more usually visual).
The ...
4
votes
Accepted
What is the number 0.05 in the calculation of contrast ratio between colors?
The Gamma correction and RGB constants are derived from the Standard Default Color Space for the Internet (sRGB), and the 0.05 offset is included to compensate for contrast ratios that occur when a ...
4
votes
Why do many prominent web apps use blue primary button with white text, when it fails the WCAG 2.1 contrast threshold
Accessibility modes are likely the reason. Twitter has a high-contrast mode for users who need it:
The accessibility setting of the web app now has a new “increase color
contrast” toggle button. The ...
4
votes
APCA (WCAG 3.0) does not allow for 14px font to be used as a regular base
Short Answer
It actually depends more on the x-height, and on the use case as well. What was in the FPWD of WCAG 3 (over two years ago) was little more than a placeholder.
Longer Answer
DISCLOSURE: I ...
3
votes
Accepted
High contrast/visible colors for google maps
There are a few things to remember from color theory: Hue, Saturation and Lightness. Here is a good reference: http://www.colorsontheweb.com/Color-Theory/Color-Contrast
If I'm looking for two colors ...
Only top scored, non community-wiki answers of a minimum length are eligible
Related Tags
contrast × 84accessibility × 39
color × 32
wcag × 14
color-scheme × 11
readability × 7
buttons × 6
usability × 5
color-blindness × 5
icons × 4
website-design × 3
themes × 3
displays × 3
background × 3
gui-design × 2
mobile × 2
layout × 2
mobile-application × 2
info-visualisation × 2
material-design × 2
hyperlinks × 2
text × 2
css × 2
typography × 2
disable × 2