Color contrast considerations in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a Bootstrap class that ensures good text contrast on a dark background.

Bootsrap

<button class="btn btn-primary [1]">Click me</button>

Drag options to blanks, or click blank then click option'

Abg-light

Btext-dark

Ctext-light

Dbg-dark

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-dark on a dark background makes text hard to read.

Adding background classes instead of text color classes.

Using text-light makes the text color light, which contrasts well on a dark background like btn-primary.

2fill in blank

medium

Complete the code to add a Bootstrap class that ensures good text contrast on a light background.

Bootsrap

<p class="bg-light [1]">This is readable text.</p>

Drag options to blanks, or click blank then click option'

Atext-dark

Bborder

Cbg-dark

Dtext-light

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-light on a light background makes text hard to see.

Adding unrelated classes like border.

Using text-dark on a light background like bg-light ensures the text is easy to read.

3fill in blank

hard

Fix the error in the code to ensure the text has enough contrast on a dark background.

Bootsrap

<div class="bg-dark [1]">Important message</div>

Drag options to blanks, or click blank then click option'

Atext-light

Btext-muted

Ctext-dark

Dbg-light

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-dark on a dark background.

Using text-muted which is too faint.

The text-light class provides light-colored text that contrasts well on a dark background like bg-dark.

4fill in blank

hard

Fill both blanks to create a Bootstrap alert with good color contrast for a warning message.

Bootsrap

<div class="alert [1] [2]" role="alert">Warning! Check this out.</div>

Drag options to blanks, or click blank then click option'

Aalert-warning

Btext-dark

Ctext-light

Dalert-primary

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-light on yellow background makes text hard to read.

Using unrelated alert classes like alert-primary.

The alert-warning class gives a yellow background, so text-dark ensures the text is readable with good contrast.

5fill in blank

hard

Fill all three blanks to create a Bootstrap card with a dark header and readable text.

Bootsrap

<div class="card">
  <div class="card-header [1] [2]">Header</div>
  <div class="card-body [3]">Content goes here.</div>
</div>

Drag options to blanks, or click blank then click option'

Abg-dark

Btext-light

Ctext-dark

Dbg-light

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-dark on dark backgrounds.

Not matching text color to background color.

The header uses bg-dark for dark background and text-light for readable text. The body uses text-dark on default light background for good contrast.

Practice

1. Why is color contrast important when using Bootstrap's color utilities?

easy

A. It helps make text readable for everyone, including people with vision difficulties.

B. It makes the website load faster.

C. It changes the font style automatically.

D. It adds animations to buttons.

Solution

1. Step 1: Understand the purpose of color contrast

   Color contrast ensures text stands out from the background, making it easier to read.

2. Step 2: Connect with accessibility goals

   Good contrast helps users with vision impairments read content comfortably.

3. Final Answer:

   It helps make text readable for everyone, including people with vision difficulties. -> Option A

4. Quick Check:

   Color contrast = readability and accessibility [OK]

Hint: Remember: contrast means clear difference between text and background [OK]

Common Mistakes:

• Thinking contrast affects website speed
• Confusing contrast with font style
• Assuming contrast adds animations

2. Which Bootstrap class ensures good contrast for text on a dark background?

easy

A. text-light

B. text-dark

C. bg-dark

D. bg-light

Solution

1. Step 1: Identify text color for dark backgrounds

   On dark backgrounds, light-colored text is needed for contrast.

2. Step 2: Match Bootstrap class to light text

   The class text-light applies light-colored text suitable for dark backgrounds.

3. Final Answer:

   <code>text-light</code> -> Option A

4. Quick Check:

   Dark background needs light text = text-light [OK]

Hint: Dark background? Use text-light for readable text [OK]

Common Mistakes:

• Using text-dark on dark backgrounds
• Confusing background and text classes
• Using background classes instead of text classes

3. What will be the visible text color if you use class="bg-primary text-white" on a button in Bootstrap?

medium

A. White text on a white background

B. Blue text on a white background

C. Black text on a blue background

D. White text on a blue background

Solution

1. Step 1: Understand Bootstrap color classes

   bg-primary applies a blue background, and text-white applies white text color.

2. Step 2: Combine background and text colors

   The button will show white text on a blue background, ensuring good contrast.

3. Final Answer:

   White text on a blue background -> Option D

4. Quick Check:

   bg-primary + text-white = white on blue [OK]

Hint: Remember: text color class controls text, bg class controls background [OK]

Common Mistakes:

• Mixing up text and background colors
• Assuming bg-primary changes text color
• Ignoring contrast between text and background

4. You applied class="bg-warning text-warning" to a Bootstrap alert. What is the problem?

medium

A. The alert will not display because the classes conflict.

B. Text and background colors are the same, causing poor contrast.

C. The text will be invisible because text-warning is invalid.

D. The background color will override the text color.

Solution

1. Step 1: Analyze the classes used

   Both bg-warning and text-warning apply the same yellowish color to background and text.

2. Step 2: Understand color contrast impact

   Using the same color for text and background results in poor contrast, making text hard to read.

3. Final Answer:

   Text and background colors are the same, causing poor contrast. -> Option B

4. Quick Check:

   Same color text and background = poor contrast [OK]

Hint: Avoid same color for text and background to keep contrast [OK]

Common Mistakes:

• Thinking classes conflict and break display
• Assuming text-warning is invalid
• Believing background overrides text color always

5. You want to customize a Bootstrap card with a light gray background and dark text for good contrast. Which combination is best?

hard

A. class="bg-dark text-light"

B. class="bg-secondary text-secondary"

C. class="bg-light text-dark"

D. class="bg-white text-white"

Solution

1. Step 1: Match background and text colors for contrast

   A light gray background needs dark text to be readable.

2. Step 2: Identify Bootstrap classes for light background and dark text

   bg-light gives a light gray background, and text-dark applies dark text color.

3. Step 3: Evaluate other options

   Other combinations use dark background with light text (opposite of desired), the same color for text and background, or white text on white background, all causing poor contrast or mismatching the requirement.

4. Final Answer:

   <code>class="bg-light text-dark"</code> -> Option C

5. Quick Check:

   Light background + dark text = bg-light text-dark [OK]

Hint: Light background? Use dark text for best readability [OK]

Common Mistakes:

• Using dark background with dark text
• Using same color for text and background
• Choosing white text on white background