History: Common Color Contrast Issues and Fixes

• «
• »

            {DIV(class="table-responsive")}|| __Common color contrast problems (with link to Bootstrap documentation) __ | __Class or tag__ | __SCSS variable__ | __Bootstrap default value__ | __CSS variable, etc.__ | __Notes__
[https://getbootstrap.com/docs/5.3/forms/validation/#server-side|validationform 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}