History: Common Color Contrast Issues and Fixes

Source of version: 9 (current)

{DIV(class="row")}{DIV(class="col col-sm-7 lead")}The table below is based on issues that came up more often than others (as the [https://wave.webaim.org/extension/|WAVE accessibility browser extension] shows, at right) when checking and improving color contrast in Bootstrap themes adapted for or made for Tiki. The information could be useful if the same things need to be fixed in new theme adaptations, etc. The fixes aren't described specifically as it depends on the theme but generally involves changing the color (WAVE has a color value slider to find a passing value) and then editing the SCSS color variable and recompiling the theme or specifying a CSS variable. The info here will be updated as needed. Please edit the page or post on Matrix if you have something to add or change. {DIV}{DIV(class="col-sm-5")}{img fileId="479" alt="screenshot" title="WebAIM WAVE flagging of color contrast problems in Minty theme"}{DIV}{DIV}

{DIV(class="table-responsive")}|| __Common color contrast problems (with link to Bootstrap documentation) __ | __Class or tag__ | __SCSS variable__ | __Bootstrap default value__ | __CSS variable, etc.__ %%% Note: the standard syntax (two initial hyphens) has been changed here to avoid being interpreted as a strike-through tag.)| __Notes__
[https://getbootstrap.com/docs/5.3/forms/validation/#server-side|form valid text] | -+ .valid-feedback +- | -+$form-valid-color+- | -+$form-feedback-valid-color+- ( -+$success+- ) | -+ - -bs-form-valid-color+- (#198754) | This doesn't have enough contrast so needs to be darkened (in light mode).
[https://getbootstrap.com/docs/5.3/forms/validation/#server-side|form invalid text] |  -+ .invalid-feedback +- |  -+$form-invalid-color+- | -+$form-feedback-invalid-color+- ( -+$danger+- ) | -+ - -bs-form-invalid-color +- (#dc3545) | This doesn't have enough contrast so needs to be darkened (in light mode).
[https://getbootstrap.com/docs/5.3/content/typography/#naming-a-source|blockquote footer] | -+ .blockquote-footer +- | -+ $blockquote-footer-color +- | -+$gray-600+- (#6C757DFF) | none | This doesn't have enough contrast so needs to be darkened (in light mode).
[https://getbootstrap.com/docs/5.3/content/reboot/#inline-code|inline code] | -+ ~np~<code>~/np~ +- | -+$code-color+-, -+$body-secondary-bg+- | -+$pink+- (overridden in Tiki's themes/default/scss/_variables.scss with -+$body-color+-) |  -+- -bs-secondary-bg+- (background) | Not usually a problem
[https://getbootstrap.com/docs/5.3/content/typography/#inline-text-elements|highlighted text] |  -+ ~np~<mark>~/np~ +-,  -+ .mark +- |  -+ $mark-color +- ,  -+  $mark-bg +- | -+ $body-color +- %%% -+ $yellow-800 +- | -+  - -bs-highlight-color +- (#212529) %%% -+ - -bs-highlight-bg +- (#fff3cd) | Sometimes the background color needs to be changed to work with the theme's body color.
[https://getbootstrap.com/docs/5.3/components/pagination|pagination] | -+ .page-link +- | -+ $pagination-color +- %%% -+ $pagination-bg +- and related variables | -+ $link-color +- %%% -+ $body-bg +- | -+ - -bs-pagination-color+- %%% -+ - -bs-pagination-bg +- %%% See also: [https://getbootstrap.com/docs/5.3/components/pagination/#variables|pagination variables] | Not a problem if Bootstrap defaults are used, but some themes specify colors that don't provide good contrast.
[https://getbootstrap.com/docs/5.3/utilities/colors/#colors|text colors] |  -+ .text-primary +-, etc. | -+ $primary +- | -+ $blue +- (#0d6efd) | -+ - -bs-primary +-, etc. %%% for example: %%% ~pp~ .text-primary {
    - -bs-text-opacity: 1;
    color: rgba(var(- -bs-primary-rgb),
              var(- -bs-text-opacity));
} ~/pp~ | The problem is that these colors need to have good contrast against their background but they use the [https://getbootstrap.com/docs/5.3/customize/color/#theme-colors|theme colors], which are more often used as background colors and maybe shouldn't be darkened. One solution that could be used is to make new CSS rules for -+.text-primary+-, etc. rather than changing the theme colors. But these aren't normally used in Tiki as far as I know.
[https://getbootstrap.com/docs/5.3/components/badge/|badges] |  -+ span.badge +- for example: %%% ~np~<span class="badge bg-secondary">~/np~ | -+ $badge-color +- (for the text; the background is set by a background color class ) | -+ $white+- | For example: %%% ~pp~.badge {
    color: #fff; }
.bg-secondary {
    - -bs-bg-opacity: 1;
    background-color: rgba(var(- -bs-secondary-rgb),
        var(- -bs-bg-opacity));
} ~/pp~ | I haven't bothered with this one because it isn't used much in Tiki except for -+ class="badge bg-secondary" +- used for counters in forum post listings, etc. 
__Common color contrast problems (with link to Bootstrap documentation) __ | __Class or tag__ | __SCSS variable__ | __Bootstrap default value__ | __CSS variable, etc.__ | __Notes__|| {DIV}
Upcoming event : Tiki Roundtable Meeting

History: Common Color Contrast Issues and Fixes

Source of version: 9 (current)

Switch Theme

About Tiki

Support

Community

Documentation

Development

Legal

Tiki Project Sites

Networks

Navigation and related functionality and content

Related content

Upcoming event : Tiki Roundtable Meeting

History: Common Color Contrast Issues and Fixes

Source of version: 9 (current)
