Skip to main content
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 ...
filip's user avatar
  • 2,675
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 ...
Roger Attrill's user avatar
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 ...
Roux Martin's user avatar
  • 14.2k
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 ...
Danielillo's user avatar
  • 19.2k
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 ...
SylvainBTL's user avatar
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'...
JS4137's user avatar
  • 483
13 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 &...
Michael Zuschlag's user avatar
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 ...
MonkeyZeus's user avatar
  • 5,658
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 ...
Nick Groeneveld's user avatar
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 ...
Steve Repsher's user avatar
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 ...
Devin's user avatar
  • 38.1k
7 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. ...
user1756177's user avatar
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 ...
joeytwiddle's user avatar
6 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 ...
Kit Grose's user avatar
  • 15.5k
5 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....
Jay's user avatar
  • 51
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 ...
Mayo's user avatar
  • 6,641
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 ...
jazZRo's user avatar
  • 11.9k
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 ...
Socrates Kolios's user avatar
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 ...
UXbychoice's user avatar
  • 1,850
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 ...
UIO's user avatar
  • 2,684
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 ...
Igor-G's user avatar
  • 3,062
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 ...
Brice's user avatar
  • 1,155
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 ...
Karl Brown's user avatar
4 votes

Maximum contrast ratio for good accessibility

...users argue that WCAG Level AA is "way too contrast"... For dark mode? I find that challenging to believe, because WCAG 2.x contrast can not calculate for dark mode. Here's an example, ...
Myndex's user avatar
  • 329
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 ...
Lokesh Dhakar's user avatar
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 ...
Izquierdo's user avatar
  • 12.7k
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 ...
Myndex's user avatar
  • 329
3 votes
Accepted

Text contrast for highly saturated call to action buttons

Yes, color contrast can feel very subjective. The white text is easier for me to read too, at least at this stage of my eyesight, but the contrast ratio formula is pretty precise. You should trust ...
slugolicious's user avatar
  • 3,305
3 votes

Mostly white screen (8 hours per day)

By using a light shade of grey as your background, you can then use pure white to highlight or emphasise something. For example on this site, the textbox for writing an answer is pure white and it ...
Martyn's user avatar
  • 2,358
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 ...
kerr's user avatar
  • 976

Only top scored, non community-wiki answers of a minimum length are eligible