Insuficient contrast ratio

[zwiastunsw]

1. Insuficient contrast ratio (2.92 < 4.5)

URL: administrator/index.php?option=com_content&view=articles

The color combination #858a8e/#e9ebed has a contrast ratio of 2.92, which is not sufficient. At this size, you will need a ratio of at least 4.5.
Consider using the following foreground/background combination:
#656b71/#e9ebed / has a ratio of 4.52

###Relevant code:
<button class="button-status-group btn btn-action dropdown-toggle" data-toggle="dropdown" data-target="#toolbar-dropdown-status-group" aria-haspopup="true" aria-expanded="false" type="button" disabled="true"> <span class="fa fa-ellipsis-h" aria-hidden="true"></span> Actions</button>

2. Insuficient contrast ratio (3.77 < 4.5)

URL: administrator/index.php?option=com_content&view=articles

The color combination #ffffff/#6a879f has a contrast ratio of 3.77, which is not sufficient. At this size, you will need a ratio of at least 4.5.
Consider using the following foreground/background combination:
#ffffff/#587a95 / has a ratio of 4.53

Relevant code:

<button type="button" class="btn btn-primary js-stools-btn-clear mr-2" disabled=""> Clear </button>

3. Insuficient contrast ratio (4.43 < 4.5)

URL: administrator/index.php?option=com_content&view=articles

The color combination #2077dd/#ffffff has a contrast ratio of 4.43, which is not sufficient. At this size, you will need a ratio of at least 4.5.
Consider using the following foreground/background combination:
#1976dc/#ffffff / has a ratio of 4.50

Relevant code:

<a class="hasTooltip" href="/40_tpl/administrator/index.php?option=com_content&amp;task=article.edit&amp;id=72" title="Edit Popular Tags"> Popular Tags</a>

4. Insuficient contrast ratio (3.88 < 4.5)

URL: administrator/index.php?option=com_content&view=article&layout=edit

The color combination #7a828b/#ffffff has a contrast ratio of 3.88, which is not sufficient. At this size, you will need a ratio of at least 4.5.
Consider using the following foreground/background combination:
#6f7781/#ffffff / has a ratio of 4.53

Relevant code:

<button type="button" data-alloy-tabstop="true" tabindex="-1" class="tox-statusbar__wordcount">0 words</button>

5. Insuficient contrast ratio (4.29 < 4.5)

URL: administrator/index.php?option=com_content&view=article&layout=edit

The color combination #ffffff/#607e92 has a contrast ratio of 4.29, which is not sufficient. At this size, you will need a ratio of at least 4.5.
Consider using the following foreground/background combination:
#ffffff/#5b7a8f / has a ratio of 4.54

Relevant code:

<button type="button" class="btn btn-secondary" href="#" onclick="tinyMCE.execCommand('mceToggleEditor', false, 'jform_articletext');return false;"> <span class="icon-eye" aria-hidden="true"></span> Toggle Editor </button>

6. Insuficient contrast ratio (4.30 < 4.5)

The color combination #6c757d/#f5f5f5 has a contrast ratio of 4.30, which is not sufficient. At this size, you will need a ratio of at least 4.5.
Consider using the following foreground/background combination:
#68727a/#f5f5f5 / has a ratio of 4.50

Relevant code:

<span class="text-muted">⋮&nbsp;&nbsp;&nbsp;</span>

7 Insuficient contrast ratio links / background

URL: administrator/index.php?option=com_content&view=articles

Proposals for solutions:

1. If background = #f5f5f5
2. If background = # ffffff

[brianteeman]

1,2,3 are now resolved - others still to address

[bembelimen]

What software do you use for displaying the ratio?

[brianteeman]

pretty much any browser accessibility tool will do it. The best one at the moment I think is https://accessibilityinsights.io/
but if you just want something basic and simple just for the color contrast work then look for a browser extension called tota11y

[brianteeman]

and if you just want a tool to test color values then use this website
https://webaim.org/resources/contrastchecker/

[bembelimen]

Thx

[bembelimen]

Does disabled buttons have to be readable (= have enough contrast)?

[brianteeman]

Good question. Yes they do. Someone needs to read the button even if it is disabled

[chmst]

If the colour has enough contrast, the button (or text) does not look"muted". (I despite the "muted", I always want to clean my glasses).
If we say that buttons are muted when they are grey, then colorblind don't recognize them as muted.