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 for users without any disabilities very good visible, however the tool “Color Contrast Analyser” show only a contrast to the white background of 2.0:1.
So the graphic does not meet WCAG 2.1 Level AA. But what is the reason? Again: the orange part of the graphic is very good visible. Might it be an inaccuracy of algorithm for calculating colour contrast? Or is it just my personal sensation?
Any other ideas?
Is there a tool to help me pick proper colors for:
in 3D space. Colors should have proper contrast.
A sample of my options for background color is:
#c8c8c8c , object color:
#888888 , object color:
#444444 , object color
A user can change the default design of his site by selecting a color. This color is applied to the menu background color. The problem is that I have to change the menu text color depending on the selected color (eg if the user choose darkgreen then teh text color needs to be white).
I only want to use or white or black as a text color for the menu and want to know how I can calculate whether white or black results in best readability.
The website is aimed at soccerteams. Since soccerteams often have specific colors I want to give them the option to add teamcolors to the site. templates won’t do because I can’t provide all the colors with templates. I also opt not to give them the option to define the text color since I think this is a physics problem (contrast)
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? because it is clearly less readable.
Thanks for the time.
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 between this grey and white on my display (a 27″ 4K) but on other displays this is not always the case, which reflects badly on my designs and could impact user experience.
Reasons might include badly calibrated / poor quality displays.
Assuming all accessibility standards have been met, is there a ‘lightest’ shade of grey that:
- Provides a contrast with a white background
- Does not significantly impact the legibility of dark foreground text
- Will be reliably displayed for most users under normal conditions
Very related to this question: Accessible Disabled State but that is about how to style disabled buttons to make them accessibility compliant, but my question is slightly different.
Is it actually an accessibility requirement for disabled features to be contrast compliant?
You are not hiding functionality from visually impaired people by making it grey on grey because the feature is unavailable to everyone, so they are not missing out on features because of this. Yes, it’s always better for everything to be contrast compliant, but that might not be relevant here.
The situation is this – we have to disable features of our web application when the system is undergoing scheduled maintenance. Therefore we don’t want to remove the buttons altogether because we want the user to know that the feature is only temporarily unavailable. Additional messaging is provided on the page stating that some features are unavailable.
We designed a standard inactive state button (dark grey text on lighter grey button background) but it has come back to us with the concern that it may be failing DDA compliance. However I disagree with that concern for the reasons I state above. Am I mistaken, or is it OK to have grey-on-grey buttons for such situations?
Note: I’m not looking for any alternative solutions (leave that to the linked questions) my query is specifically about whether or not this is an accessibility concern.
Can someone give me examples of
color contrast for
accessibility which big companies websites use?
I am only able to find 2 live website examples
I am doing toggle switch contrast switch for my e-commerce website but was not able to find any other e-commerce website doing so.
Can someone give me a reference to this color contrast which other websites are using it?
I want a reference for those sites which actually uses this feature
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 to research about this topic all around the internet and this is my last resource to find out about this. Here is an image that shows what I am talking about.
The button color and the text are accessible, however the background of the div and the background of the text have low resolution.
Please help and thank you in advance:
With regards to Accessibility, many sites focus on font-size adjustments either the browser’s / OS’s native controls or via a control on the page (usually denoted by 3 capital A’s of varying size).
However, there are some instances where a contrast adjustment may be needed. Webpages can be affected by the OS’s high contrast mode (mentioned here with screen shot); however, depending on the stylesheet, this may end up being a mess.
Because of this, should websites that have higher accessibility requirements provide options for the visitor to select a style / color scheme that provides a higher contrast than the default? If so, should there be varying degrees or just normal and the extreme high contrast mode that’s look like the OS’s version?