Questions tagged [contrast]

is the difference in luminance and/or color that makes an object (or its representation in an image or display) distinguishable.

Filter by
Sorted by
Tagged with
0 votes
1 answer
63 views

Yellow in high contrast modes

We're implementing different color themes across our apps. All our basic themes are WCAG level AA compliant, but now it's high contrast theme's turn. It's going to be a theme that features maximum ...
exp's user avatar
  • 2,233
1 vote
1 answer
101 views

WCAG' Non-text contrast requirements, what exactly are the guidelines with hover?

WCAG does a weird job of explaining their non-text contrast requirements with hover states. Within their "Understanding non-text contrast" documentation, they have this bizarre example: As ...
UXerUIer's user avatar
  • 5,435
0 votes
1 answer
45 views

Text Contrast Issue: How to enhance a hero image section?

I'm using a hero image as a landing page for a ecommerce site. Here's what it looks like so far: I'm having issues with the text's contrast over the background image. Any ideas on how I can make the ...
solange's user avatar
2 votes
1 answer
62 views

(WCAG 1.4.11) Understanding 'subsuming' in Non-text Contrast AA Level

In a vaccuuum I understand how to interpret the criterion. If a border is the only way to identify a control then Border vs container must have >3 contrast. If a background is the only way to ...
Michael North's user avatar
0 votes
1 answer
223 views

How to check contrast of a transparent button with a border?

Simple question but I can't find the correct way to test. I have a normal button, that is transparent but has a border colour with some opacity. I'm not convinced that the contrast ration is high ...
Burns's user avatar
  • 23
3 votes
2 answers
237 views

Are contrast checkers really accurate?

Is WCAG AA level truly necessary? I'm having difficulty making optimal contrast choices, and honestly, bold text, even at 16px, appears much more readable than regular text. Additionally, I often ...
Gugalcrom123's user avatar
0 votes
1 answer
275 views

Do small icons have to pass at least 3:1 for contrast accessibility?

Can anyone clarify if icons (UI elements) 20x20 etc have to be 3:1 and is that a recommendation? Thanks
Keano's user avatar
  • 27
0 votes
2 answers
457 views

APCA (WCAG 3.0) does not allow for 14px font to be used as a regular base

According to APCA (WCAG 3.0), we are not able to use 14px font as a regular base, but when it comes to SaaS application design, 14px is commonly used as the base font size. Despite my attempt to use ...
Iroshan De Zilva's user avatar
13 votes
4 answers
3k views

Change link color based in background color?

Our white-background webpages use the blue hyperlinks as shown in the image below. Occasionally we have dash-bordered yellow information sections on a white webpage as shown. In that case someone said ...
user1946932's user avatar
0 votes
2 answers
598 views

Background video & accessibility of text overlays

I have a situation with an autoplaying video banner (you know the type, full screen html background element) where there is text overlayed on top of it -- common in marketing landing pages and their ...
Ross's user avatar
  • 1
0 votes
1 answer
130 views

How do you create both sufficient contrast and a harmonious outcome for text on different tints of the same color?

Here are two examples. One is a table, the other an illustration. Both use different tints of the same color with text on top. How do you change the color of the text across these tints to be both ...
user3561767's user avatar
1 vote
1 answer
51 views

Do line numbers in a code theme need to meet WCAG AA contrast?

We're designing a custom code theme which displays line numbers, and we're having some internal debate whether these line numbers need to meet WCAG AA contrast guidelines? They're not the main body ...
Adam Thompson's user avatar
2 votes
1 answer
933 views

Using text-shadow for accessibility

I'm interested in understanding whether there has been any research or confirmed values for using the text-shadow property with the goal of meeting WCAG minimum colour contrast values. In my ...
dougajmcdonald's user avatar
26 votes
8 answers
7k views

Color picker - what to do if the user selects the same color as the background?

I am working on a app that has an area dedicated to color choosing, like so: Now, ordinarily, this works fine, but what if the user chooses the same color as the background color? It would look like ...
JS4137's user avatar
  • 483
2 votes
1 answer
366 views

Image comparison sliders and visual accessibility

I am creating an image slider for a site, and I am confused on how to successfully meet wcag requirements. Below is an example that conveys the idea of what I am creating. I have read a couple ...
frownyface's user avatar
5 votes
1 answer
208 views

Why do many prominent web apps use blue primary button with white text, when it fails the WCAG 2.1 contrast threshold

WCAG 2.1 says to have a minimum contrast ratio of 4.5:1, but blue primary buttons of Twitter, Figma and Outlook have white text which fails to cross the threshold ratio. Is there another scientific ...
Tanay Khanna's user avatar
0 votes
1 answer
56 views

Is 200% browser enlarge an alternative for colors with contrast less than 4,51:1?

I have a website that has font size for body 14px. All the colors have contrast ratio of 3:1. wgac 2.1 states that normal fonts should have a ratio of 4,51. But if the user zooms in the site, normal ...
user3431336's user avatar
4 votes
3 answers
497 views

What is the number 0.05 in the calculation of contrast ratio between colors?

To calculate contrast ratio the following formula is used (source): (L1 + 0.05) / (L2 + 0.05) where: L1 is the relative luminance of the lighter of the colors, and L2 is the relative luminance of ...
Bram Janssen's user avatar
4 votes
2 answers
146 views

Statistics (or tools) on screen calibration & readability

Fairly straight forward question, but I could not find any answers to it. Are there any known statistics regarding screen calibration & readability? Are there any colors to avoid where screen ...
Kevin M.'s user avatar
  • 1,060
1 vote
2 answers
159 views

Contrast of a message box

I'm in the middle of updating the colours of our app and making them as consistent as possible, but also trying to bring them in line with the WCAG AA rating for contrast. One area I'm unsure if I ...
PaReeOhNos's user avatar
1 vote
2 answers
142 views

Color contrast too low, but element good visible

I am checking a software against the software ergonomic requirements of WCAG 2.1 Level AA. On part is the colour contrast, which must be for graphics 3.0:1. In the following graphic the orange part is ...
zuluk's user avatar
  • 177
1 vote
5 answers
357 views

Legibility and contrast for light weight sources. Regarding accessibility

I am developing a web application, starting from an approved design, I have the task of evaluating if it is readable. The question is: the light body, modifies the consideration over the contrast? ...
user3763771's user avatar
2 votes
2 answers
726 views

Practical 'lightest' shade of grey for contrast with white

I often use a light shade of grey such as rgb(242,242,242) in my designs to provide a subtle contrast to white, e.g. for the background of alternating rows in a table. I can easily distinguish ...
Matt Saunders's user avatar
1 vote
1 answer
771 views

WCAG 2.1 contrast issue for Google/Angular Material Design

I'm relatively new to accessibility compliance, but my research has found a confusing anomaly: The Angular Material buttons, links, etc are apparently WCAG compliant, yet do not seem to have the ...
MattOnce's user avatar
1 vote
2 answers
299 views

Is there a standard for indicating a high contrast style? [closed]

I am working on a web app and have developed both a normal stylesheet and a secondary high contrast stylesheet. I am coming unstuck when it comes to allowing a user to switch between styles. Is ...
Mauro's user avatar
  • 225
1 vote
1 answer
236 views

What is the procedure for measuring color contrast around anti-aliasing?

What is the proper method for measuring the color contrast of on-screen elements that are anti-aliased (particularly, but not limited to, text)? Does a standard method even exist? Here's my specific ...
SOLO's user avatar
  • 113
17 votes
4 answers
3k views

Maximum contrast ratio for good accessibility

So we are remaking an enterprise app from scratch. This time we want to base our design decisions on proper research. Our users use the app 24/7 with high requirements for UX. So our main goal is to ...
exp's user avatar
  • 2,233
0 votes
1 answer
53 views

How to force the user to draw on certain elements if there are images in the layout

Well, I ran into the problem of distinguishability of content in a mobile application. In fact, there are a huge number of pictures on the page (movie poster, preview of the film as a picture). A lot ...
StupiStupiDu's user avatar
3 votes
4 answers
2k views

Looking for research regarding pure black vs dark gray for readability

I've heard people say that websites with pure black text on a white background can cause exhaustion when reading, and that it's better to use a very dark gray text or a light gray background color to ...
Kurtis Beavers's user avatar
0 votes
1 answer
125 views

Colors VS Screens - Colors to avoid

I'm working on my personal webpage, my primary background color (apart from white) is straight-forward turquoise (#40e0d0) from the styles selection in my navigator. On my laptop, the color is more ...
LoloSSS's user avatar
4 votes
5 answers
604 views

WCAG 2.0 color contrast - How strict do you need to follow?

I have some buttons with a purple background and I am trying to set the text color so it is in compliance of the WCAG 2.0 color contrast rules. My issue is that I just don't understand how based on ...
BlueCaret's user avatar
  • 207
1 vote
1 answer
192 views

Color contrast for graphics

I'm trying to find information about minimum contrast ratio between graphic elements (e.g. a bar-graph and its background) but I can't seem to find any. Are there any good practices? WCAG 2.0 ...
Federico Kotek's user avatar
2 votes
2 answers
467 views

Text contrast for highly saturated call to action buttons

It's become a part of my way of working that I check areas of my design are adhering to accessibility guidelines, WCAG2.0 colour contrast in particular. At the moment I'm working on creating a new ...
Zenon's user avatar
  • 544
10 votes
2 answers
472 views

Mostly white screen (8 hours per day)

I am using an application which has a white background color. I am using this application 8 hours per day. I think a GUI with less contrast would be better for my eyes. I guess this would save some ...
guettli's user avatar
  • 403
5 votes
2 answers
2k views

Contrast ratio for button background color?

I am working with making a website WCAG II compliant. The designers are asking to use yellow buttons (specifically, #fcdb31) with blue text on top of them on white backgrounds. While the blue type on ...
Trisha McCabe's user avatar
1 vote
2 answers
113 views

Play & Stop VS Start & Stop for meditation app

I'm working on a mobile app and deciding about whether to change the name of the button from play to start. This controls the circle as shown below. At the moment it's play and stop but do you think ...
Ned Bayne-Powell's user avatar
4 votes
2 answers
2k views

High contrast/visible colors for google maps

I am creating some custom markers for an application that uses google maps They stand for a tow truck and a broken car. An important constraint is that they must contrast with the map bellow, in ...
josinalvo's user avatar
  • 155
11 votes
4 answers
5k views

What should a well-designed high contrast function do?

I want to make my website accessible for nearly everyone. I already have a function to increase font-size. Now I am doing the high contrast function. However, how should such an interface for ...
Noah Krasser's user avatar
2 votes
2 answers
3k views

Button passes contrast test however button's background and div's background are low contrast

I have been going back and forth with design about this. I think there should be a contrast with the button and the div that holds the button, however, design says there is no rule about that. I try ...
Batuque's user avatar
  • 23
30 votes
2 answers
20k views

Formula for color contrast between text and background

In my Android app a user can choose the color of an item. This color is then shown in background with a text on it. I want to display the text either in black or white - depending on the background ...
juergen d's user avatar
  • 459
0 votes
1 answer
135 views

Looking for Friendly Documentation on Color Contrast and Readability

We're looking to launch a new version of a website, and we had multiple users concerned about readability with grey text on a grey background. I did some basic search, and found this website. Using ...
Thebluefish's user avatar
0 votes
2 answers
200 views

what is the purpose of using Color Contrast Tool?

what is the purpose of using Color Contrast Tool? It's just background and text checking or icon checking?
Raghu Raman's user avatar
0 votes
1 answer
546 views

Is it enough to create an "accessible mode" of a website to be compliant with AA Accessibility level

I have a website, with an accessibility menu that allows the user to change the contrast level of the colors in the page in order to be compliant with accessibility level AA Does anybody know by ...
Yaron U.'s user avatar
  • 101
10 votes
2 answers
2k views

Material Design - text colors don't maximize contrast

Description The color palette for Material Design specifies hues as well as suitable colored (white/black) text to be used for each backing-hue. So for example in the Red palette there are 10 '...
Ng Oon-Ee's user avatar
  • 201
4 votes
3 answers
127 views

Dynamic mobile styling based on the lighting of the users environment

Would it be useful to come up with a dynamic mobile styling feature based on the lighting of the users environment. Similar to how the imac reduces its brightness if you cover the cam on top of the ...
Blue Ocean's user avatar
  • 10.6k
1 vote
2 answers
187 views

Internet Plans table - Differentiate by speed Units

I have this administrator section in my online Internet Service Provider management system where he can insert new Internet plans, edit and visualize existing ones. Here is a simple example using ...
MagisterMundus's user avatar
24 votes
2 answers
3k views

Do Samsung's Marshmallow skin Quick toggles have enough contrast?

I recently updated to Marshmallow, and I'm not happy with the blue over white scheme in daylight conditions. My question is if it's just me, or if this is documented and studied somewhere? If so, how ...
GUI Junkie's user avatar
  • 1,759
5 votes
4 answers
243 views

Is there a standard color list to keep adding new colors to a plot while retaining old colors?

My users pick one or more data sets to graph on a single canvas. The sets are color coded to distinguish between sets (all screenshots are for demonstrative purposes from demo utility): BLUE=...
user1717828's user avatar
1 vote
3 answers
623 views

Less contrast of text cursor over dark input box

We all know dark UI looks damn sexy. The problem is that, when the pointer hovers over a dark input box, the default black cursor has low contrast. Since this could confuse users, what might be the ...
Jivan's user avatar
  • 3,678
1 vote
1 answer
406 views

How to find an accessible color by changing lightness only?

Is the following hypothesis true? For any given color: { Hue, Saturation, Lightness_1 } there exists: Lightness_2 such that the contrast ratio between: { Hue, Saturation, Lightness_1 } and { ...
Misha Moroshko's user avatar