History: Common Color Contrast Issues and Fixes

• «
• »

            {DIV(class="row")}{DIV(class="col col-sm-7 lead")}The table below is based on issues that came up more often than others when checking and improving color contrast in Bootstrap themes adapted for or made for Tiki (as illustrated at right). The information could be useful if the same things need to be fixed in new theme adaptations, etc. The info will be updated as needed. Of course anyone else can add or edit information. {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: %%% ~pp~<span class="badge bg-secondary">~/pp~ | -+ $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}