Skip to content

Discussion: $min-contrast-ratio: 2 default in Bootstrap variables masks contrast failures #5606

@bram-atmire

Description

@bram-atmire

Describe the bug

src/styles/_bootstrap_variables.scss:59 overrides Bootstrap's default contrast threshold:

$min-contrast-ratio: 2 !default;

Bootstrap 5's default is 4.5 (the WCAG AA threshold for normal text). With this value lowered to 2, Bootstrap's color-contrast() function is allowed to pick text colours that only have a 2:1 contrast against the chosen background. Any deployer who sets $info, $primary, $secondary, $success (etc.) to a colour that would normally trigger an automatic contrast-flip will quietly ship text that fails WCAG 1.4.3 AA, with no warning at build time.

Concrete example: when a custom theme overrides --bs-info to a pale #63B3DE, Bootstrap with $min-contrast-ratio: 2 accepts white foreground on that background, producing a 2.32:1 contrast on every <span class="badge bg-info">-rendered "Item" badge. The same pattern fails on every result row that renders a type badge, multiplying the visible failures across search results pages.

Upstream's own default $info (#006666, dark teal) does pass at the WCAG threshold, so default-themed deployments do not hit this directly. The concern is that the safety net Bootstrap ships is currently disabled, so any custom theme can introduce an AA failure that Bootstrap would otherwise have auto-corrected.

The dspace theme also overrides this to 2.06 in src/themes/dspace/styles/_theme_sass_variable_overrides.scss:63, which suggests the value is intentional somewhere; capturing the rationale would help theme authors.

Confirmed in main at commit 9b025a61e.

To Reproduce

  1. Configure a custom theme with a pale $info colour (e.g. #63B3DE), or use any of the lighter Bootstrap defaults for $primary/$success/etc.
  2. Render any badge using class="badge bg-info" (type-badge.component.html, search result rows, workflow components, etc.).
  3. Run any contrast checker on the result and observe sub-4.5:1 ratios with white text.

Expected behavior

Either:

  • Restore the Bootstrap default $min-contrast-ratio: 4.5, so themes that pick a pale variant get the auto contrast-flip Bootstrap is designed to do; or
  • Document explicitly in _bootstrap_variables.scss that DSpace's default is 2, so theme authors know they own the contrast safety net themselves.

Related work

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions