Insuficient contrast ratio #295
Description
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&task=article.edit&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">⋮ </span>
7 Insuficient contrast ratio links / background
URL: administrator/index.php?option=com_content&view=articles
Proposals for solutions: