History: Common Color Contrast Issues and Fixes
Preview of version: 1
- «
- »
| Common color contrast problems (with link to Bootstrap documentation) | Class or tag | SCSS variable | Bootstrap default value | CSS variable, etc. | Notes |
| 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). |
| 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 | (#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-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 |