Bootstrap 5 (BS5) and AMS Color Palettes

Minimum Contrast Ratios

Reference: Contrast (Minimum) (Level AA)

1. For normal text (below 18pt or below 14pt if bold):

   • 4.5:1 is the minimum contrast ratio required for WCAG AA compliance.

2. For large text (18pt or larger, or 14pt bold or larger):

   • 3:1 is the minimum contrast ratio required for WCAG AA compliance.

3. For graphical objects and user interface components (e.g., icons, buttons, borders):

   • 3:1 is the minimum contrast ratio required for WCAG AA compliance.

4. WCAG AAA standards (higher level of accessibility):

   • 7:1 is required for normal text.
   • 4.5:1 is required for large text.

Reference Documentation

Note: Conveying meaning to assistive technologies: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies ? such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Bootstrap 5 uses a subset of all colors to create a smaller color palette for generating color schemes.

Bootstrap 5 Colors Are Tested for Accessibility

• Bootstrap’s core colors are designed with contrast ratios in mind, ensuring they meet WCAG 2.1 standards.
• Colors like primary, success, danger, warning, and info already align with accessibility best practices in many use cases.

Example:
Bootstrap’s $blue: #0d6efd has a contrast ratio of 4.5:1 against white, meeting the WCAG AA standard for normal text.

Benefit: Saves time?you're working with a color set already tested for contrast.

Consistency Across Components

• Bootstrap’s utility classes (e.g., .text-primary, .bg-success) ensure a consistent design language across the UI.
• If you introduce new colors without aligning them with Bootstrap’s palette, elements like buttons, alerts, badges, and form inputs may look out of place or create contrast issues.

Example:
If you use an off-brand orange (#e87722) without checking contrast, it may not be readable on both light and dark backgrounds.

Solution: Use Bootstrap’s existing colors for structure, and supplement them with accessible, high-contrast colors when needed.

WCAG Compliance & Color Blind Accessibility

• Bootstrap colors are already optimized for color contrast, but they don’t cover all accessibility needs.
• Color-blind-friendly augmentation is essential for distinguishing elements.

Example:
Instead of relying solely on Bootstrap’s $warning: #ffc107 (yellow), which has poor contrast against white (1.63:1):

• Augment with a darker shade of yellow: $warning-alt: #e6a700;
• Use non-color cues like underlines, icons, or patterns.

Benefit: Helps users with color vision deficiencies.

Future-Proofing & Scalability

• By sticking to Bootstrap’s structured color system, your styles remain flexible and maintainable.
• If Bootstrap updates its palette for better accessibility, your design won’t become outdated.

Example:
If Bootstrap 6 improves $primary for contrast, your theme can inherit the improvements automatically if built on top of Bootstrap’s variables.

Benefit: Ensures long-term accessibility without redesigning everything.

Final Thought: Balance Bootstrap’s Palette with Accessibility Enhancements

Bootstrap’s predefined colors help create a solid foundation for web accessibility.
Augment Bootstrap’s colors responsibly by checking contrast and ensuring color-blind accessibility.
Stick to Bootstrap’s color structure to maintain consistency, readability, and ease of use.

The goal isn’t just to make it look good, but to make it usable for everyone!

/* BS5 Primary Colors */    
--blue: #0d6efd;        /* RGB(13, 110, 253) */
--indigo: #6610f2;      /* RGB(102, 16, 242) */
--purple: #6f42c1;      /* RGB(111, 66, 193) */
--pink: #d63384;        /* RGB(214, 51, 132) */
--red: #dc3545;         /* RGB(220, 53, 69)  */
--orange: #fd7e14;      /* RGB(253, 126, 20) */
--yellow: #ffc107;      /* RGB(255, 193, 7)  */
--green: #198754;       /* RGB(25, 135, 84)  */
--teal: #20c997;        /* RGB(32, 201, 151) */
--cyan: #0dcaf0;        /* RGB(13, 202, 240) */
    
/* BS5 Grayscale colors */     
--white: #ffffff         /* RGB(255, 255, 255) */
--black: #000000;        /* RGB(0, 0, 0) */
--gray-100: #f8f9fa;     /* RGB(245, 249, 250) */
--gray-200: #e9ecef;     /* RGB(233, 236, 239) */
--gray-300: #dee2e6;     /* RGB(222, 226, 230) */
--gray-400: #ced4da;     /* RGB(206, 212, 218) */
--gray-500: #adb5bd;     /* RGB(173, 181, 189) */
--gray-600: #6c757d;     /* RGB(108, 117, 125) */
--gray-700: #495057;     /* RGB(73, 80, 87) */
--gray-800: #343a40;     /* RGB(52, 58, 64) */
--gray-900: #212529;     /* RGB(33, 37, 41) */

 /* AMS Primary Colors */
--ams-gray: #98a4ae;        /* RGB(152, 164, 174) */
--ams-blue: #0057b8;        /* RGB(0, 87, 184) */
--ams-orange: #e87722;      /* RGB(232, 119, 34) */
    
 /* AMS Secondary Colors */    
--ams-cyan: #0cb7e1;        /* RGB(12, 183, 225) */
--ams-yellow: #ffc222;      /* RGB(255, 194, 34) */
--ams-lime: #97d700;        /* RGB(151, 215, 0) */
--ams-green: #3b8352;       /* RGB(59, 131, 82) */
--ams-red: #d9465a;         /* RGB(217, 70, 90) */
--ams-peach: #f7955b;       /* RGB(247, 149, 91) */

/* AMS colorblind Colors */    
--ams-colorblind-black: #231f20;        /* RGB(35, 31, 32) */
--ams-colorblind-orange: #f7941d;       /* RGB(247, 148, 29) */
--ams-colorblind-sky-blue: #00b9f2;     /* RGB(0, 185, 242) */
--ams-colorblind-bluish-green: #00a875; /* RGB(0, 168, 117) */
--ams-colorblind-yellow: #ecde38;       /* RGB(236, 222, 56) */
--ams-colorblind-blue: #0072bc;         /* RGB(0, 114, 188) */
--ams-colorblind-vermillion: #f15a22;   /* RGB(241, 90, 34) */
--ams-colorblind-reddish-purple: #cc79a7; /* RGB(204, 121, 167) */