Color plays a crucial role in UI/UX design—it enhances mood, draws attention, and impacts the overall user experience.

Color Theory

It is the study of how colors interact and the effects they create when combined. Parts of color theory are as follows:

1. Color harmony: The use of colors in a way that creates a visually pleasing and balanced composition.
2. Color value: Refers to the relative lightness, darkness, saturation and hue.
3. Color Temperature: It is used to describe how cool or warm the color is. Warm colors (such as red, orange, yellow) are associated with feelings of warmth, excitement and energy. Cool colors (like blue, green, and purple) are often linked to feelings of calm, relaxation, and serenity.

Contrast

It refers to the difference in luminance or color that makes an object distinguishable from others. Good contrast improves readability and ensures that key elements stand out.

• WCAG Guidelines for Accessibility:

  • For normal text, aim for a contrast ratio of 4.5:1.

  • For large text (24px+), a contrast ratio of 3:1 is acceptable.

  • Tools like Contrast Checker (WebAIM) can help ensure your design meets accessibility standards.

60-30-10 Rule

Breakdown:

• 60%: Dominant Color – this will be the main color of your interface (e.g., background or large sections).
• 30%: Secondary Color – used to add contrast to the dominant color (e.g., sidebars, cards, buttons).
• 10%: Accent Color – used sparingly to highlight important actions (e.g., CTA buttons, icons, links).