Pairing light and dark colors in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main goal when pairing light and dark colors in design?

The main goal is to create good contrast so text and elements are easy to see and read, improving accessibility and user experience.

beginner

How does Tailwind CSS help with pairing light and dark colors?

Tailwind provides built-in support for dark mode using the dark: prefix, letting you easily switch styles for light and dark themes.

intermediate

Why should you avoid using pure black (#000000) and pure white (#FFFFFF) together?

Pure black and white create very harsh contrast that can strain eyes. Using softer shades improves comfort and looks nicer.

beginner

What Tailwind utility class would you use to change text color in dark mode?

Use dark:text-[color] where [color] is the color you want for dark mode text, for example dark:text-gray-200.

intermediate

How can you test if your light and dark color pairs have good contrast?

Use browser DevTools or online contrast checkers to measure contrast ratio. Aim for at least 4.5:1 for normal text to meet accessibility standards.

Which Tailwind prefix applies styles only in dark mode?

A dark:

B light:

C hover:

D focus:

The dark: prefix applies styles only when dark mode is active.

What is a good reason to avoid pure black and pure white together?

A They create harsh contrast that can strain eyes

B They are not supported in Tailwind

C They do not work on mobile devices

D They cause slow page loading

Pure black and white create very strong contrast that can be uncomfortable to look at.

Which contrast ratio is recommended for normal text to be accessible?

A 10:1

B 3:1

C 1:1

D 4.5:1

A contrast ratio of at least 4.5:1 is recommended for normal text to ensure readability.

How can you change background color for dark mode in Tailwind?

A bg-dark

B dark:bg-[color]

C dark-color-bg

D bg-dark-[color]

Use dark:bg-[color] to set background color in dark mode.

What tool can help check color contrast for accessibility?

A Image editor

B Text editor

C Browser DevTools

D File explorer

Browser DevTools often have accessibility tools to check color contrast ratios.

Explain how to use Tailwind CSS to create a website that looks good in both light and dark modes.

Think about how you switch colors when the user prefers dark mode.

Describe why good color pairing between light and dark themes matters for users.

Consider how colors affect comfort and usability.