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 need to do this for, is an alert/info message that is displayed say at the top of a form to give users info about any warnings, or errors for example.

warning message

In this example, the text has an AA contrast of 7.09:1, however the yellow box itself is only 1.39:1 and therefore fails, however the containing box is not a component, or anything a user needs to directly interact with so do I actually need to worry about the contrast here? From a design perspective, I’d prefer a lighter colour (and on the other message types as well) but am just conscious of the contrast

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 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?

graphic with red, orange and green skala. medium value is 38.

Objects in 3D space: color contrast against background

Is there a tool to help me pick proper colors for:

  1. Objects
  2. Background

in 3D space. Colors should have proper contrast.


A sample of my options for background color is:

Background color: #c8c8c8c , object color: #576675

background color = #c8c8c8

Background color: #888888 , object color: #576675

background color = #888888

Background color: #444444 , object color #576675

background color: #444444

automatically calculate contrast

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)

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 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

Do disabled buttons still need to be contrast compliant for accessibility?

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.

Why color contrast is important and example of current online companies using it?

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

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 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. enter image description here

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:


Should websites provide high contrast or alternate schemes?

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?