History: Common Color Contrast Issues and Fixes
Preview of version: 4
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.
| 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 |
| 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). |
| 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). |
| 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). |
| inline code | <code> | $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 |
| highlighted text | <mark> , .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. |
| pagination | .page-link | $pagination-color $pagination-bg and related variables | $link-color $body-bg | - -bs-pagination-color - -bs-pagination-bg See also: pagination variables | Not a problem if Bootstrap defaults are used, but some themes specify colors that don't provide good contrast. |
| text colors | .text-primary , etc. | $primary | $blue (#0d6efd) | - -bs-primary , etc. for example: .text-primary {
- -bs-text-opacity: 1;
color: rgba(var(- -bs-primary-rgb),
var(- -bs-text-opacity));
} | The problem is that these colors need to have good contrast against their background but they use the 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.
|
| badges | span.badge for example: | $badge-color (for the text; the background is set by a background color class ) | $white | For example: .badge {
color: #fff; }
.bg-secondary {
- -bs-bg-opacity: 1;
background-color: rgba(var(- -bs-secondary-rgb),
var(- -bs-bg-opacity));
} | 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 |