Colors Research

Rules:

• Include lighter and darker shades to cover hover, pressed, and disabled states.
• Never use brand colors for error, warning, or success messages. Those states need their own semantic meaning.
• When everything uses the brand color, nothing stands out.

Rules:

• Give each semantic color one clear meaning and stick to it.
• Don't use semantic colors as decorative accents.
• Check that semantic colors remain legible in both light and dark themes.
• Always pair color with text or an icon. Color alone isn't enough to communicate meaning.

Rules:

• Use neutrals across most of the interface.
• Always pull text colors from the neutral scale.
• Keep borders and dividers subtle, but visible enough to support clear separation.
• Use dedicated neutral values for disabled states rather than relying on opacity alone.

Rules:

• Avoid pure black for large amounts of body text unless contrast requirements demand it.
• Test black and white combinations with real content and realistic layouts.

Rules:

• Don't use accent colors in place of brand or semantic colors.
• Limit accent usage to avoid visual noise.

If it must be read, text contrast is mandatory (WCAG 2.1: 4.5:1)

Any text a user needs to read in order to understand or act must meet a minimum contrast ratio of 4.5:1 against its background. This covers body text, labels, helper text, button text, links, error messages, and icons that function as text.

Note!

Large text (18pt or larger, or 14pt bold) can pass at 3:1. Either way, the target is clear readability at a glance.

If It Must Be Seen or Used, Non-Text Contrast Is Required (WCAG 2.1: 3:1)

Any element a user needs to notice or interact with must meet a minimum of 3:1 against surrounding colors. This includes buttons, selected states, focus indicators, toggles, sliders, charts, and interactive containers.

Note!

If a user can't quickly tell what's clickable or what state something is in, the contrast isn't strong enough.

If It Is Only Decorative, Contrast Is Optional

Elements that don't affect how the interface works don't require strict contrast. This includes light background tints used to separate sections, soft shadows that add depth without implying interactivity, and illustrations that don't communicate status or instructions.

1. All Readable Text Must Meet at Least 4.5:1 Contrast (WCAG 2.1)

Any text that communicates information needs a minimum contrast ratio of 4.5:1 against its background. This applies regardless of size or visual priority. Secondary and helper text still needs to be readable.

2. Large Text May Meet 3:1, but Readability Still Matters

Large text (18pt or larger, or 14pt bold) can meet the threshold at 3:1, but the goal is still clear readability at a glance, not just passing the check.

3. Icons That Act Like Text Follow Text Contrast Rules

If an icon is needed to understand content, identify an action, or communicate a state, it should meet at least 3:1 contrast against adjacent colors. When an icon appears alongside text (like in a button), the text must meet 4.5:1 and the icon must meet 3:1.

Examples of functional icons:

• Heart icon for Like
• Bookmark icon for Save
• Bell icon for Notifications
• Gear icon for Settings
• Checkmark for Success
• Warning triangle for Alert

Icon-only and icon+text actions follow the same principle of visibility, but text carries a stricter threshold because it has to be read, not just recognized.

1. Surface Contrast Is Contextual

Layout containers, cards, and background sections don't always need a specific contrast ratio. When they're purely structural, light visual separation is enough.

2. Interactive Surfaces Must Meet 3:1 Contrast

If a surface has interactive states like hover, focus, or selection, it needs at least 3:1 contrast against surrounding backgrounds. This applies to clickable containers, selected rows, active tabs, error backgrounds, focus states, and data visuals.

1. Inputs Must Be Easy to Spot

Users shouldn't have to search for where to type. Inputs need to be clearly visible in every state except disabled.

2. Input Borders Must Meet 3:1 Contrast

If a border defines the input boundary, it must meet at least 3:1 contrast against the background. This applies across default, hover, focus, and error states.

1. Disabled UI Elements May Fall Below WCAG Contrast

WCAG allows lower contrast for disabled states because they signal that something can't be used right now.

2. Disabled Content Must Still Be Readable

Lower contrast doesn't mean illegible. Disabled text should still be easy to read and clearly visible.

3. Disabled Should Look Intentional

Users should immediately understand the element exists but isn't available, not wonder if something is broken or still loading.

4. Opacity Is Not a Good Strategy

Opacity creates unpredictable contrast depending on the surface underneath. A button at 40% opacity might look fine on white but nearly disappear on a grey background. Color blind users may also struggle to distinguish states when opacity is the only differentiator.

Use specific neutral values built for low emphasis instead.

Borders Are Functional Unless Proven Decorative

Most borders serve a purpose, whether that's defining structure, indicating interaction, or communicating state. Input borders and card states are good examples.

Functional Borders Must Meet 3:1 Contrast

If a border defines an input, focus, error, selection, or any interactive area, it needs at least 3:1 contrast against the background.

Decorative Borders Are The Exception

A border only skips contrast requirements when it's purely visual. If removing it doesn't change how the interface is understood, strict contrast isn't required. This covers subtle dividers inside cards or tables, light outlines used to group content, or borders that are part of a visual pattern.

Opacity Is Not a Good Strategy

Opacity creates inconsistent contrast depending on the surface underneath. Use dedicated neutral values built for lower emphasis instead.

1. Focus Must Always Be Visible

Keyboard and assistive technology users depend on focus indicators to navigate. If the focus state is hard to see, the interface doesn't work for them.

2. Focus Must Not Rely on Color Alone

Color alone isn't enough. Shape, outlines, or stroke weight should also contribute to making the focus state clear.

3. Focus Must Work on All Backgrounds

If the focus indicator disappears on certain backgrounds or themes, it needs to be fixed.

1. Text on Surface (Highest Priority)

Any text a user needs to read must meet 4.5:1, or 3:1 for large text. This covers body text, labels, button text, links, helper text, error messages, and icons that function as text. This is typically the first thing accessibility tools, auditors, and legal reviewers check.

2. Interactive Elements and States (Very High Priority)

Anything a user needs to notice or interact with must meet at least 3:1 against surrounding colors. This includes buttons, selected states, focus indicators, toggles, sliders, input borders, and error or success outlines.

Users need to clearly see what's clickable, what's selected, where focus is, and what feedback the system is giving. If those states aren't visible, the product becomes hard to use even when the text is readable.

3. Surface on Surface (Contextual)

Surface contrast depends on purpose. Backgrounds, cards, and containers don't always need a fixed ratio. A layout-only card can stay subtle. A clickable or meaningful card must meet 3:1.

4. Borders on Surfaces (Conditional)

Borders become a contrast requirement when they serve a functional role. They must meet 3:1 when defining inputs, showing focus, indicating error, warning, or success states, or separating interactive areas users need to notice. Purely decorative borders are exempt.

Advantages:

Automatic generation works well when speed and visual consistency are the priority. It helps teams build palettes quickly, reduce setup time, explore directions faster, and arrive at polished starting points.

It is often a practical option for products outside heavily regulated environments such as:

• Government
• Banking
• Healthcare
• Education
• Enterprise systems

Disadvantages:

The main drawback is reduced control. When a tool generates the palette, the reasoning behind individual shades isn't always clear. Over time, this makes the system harder to evolve because color decisions become tied to the tool rather than product needs.

Products built on fully generated palettes can also start to look similar, since many teams use the same generation methods.

Advantages:

The biggest advantage is a deeper understanding of the system. When every shade has a clear purpose, extending the palette becomes more predictable. New colors, states, and variants can be added without breaking consistency.

Manual systems also tend to feel more refined in dense interfaces because colors are adjusted for real usage, not theoretical balance.

Disadvantages:

The trade-off is time and ongoing maintenance. Manual systems require:

• Repeated testing
• Visual comparison
• Accessibility validation
• Careful balancing between hues

Some colors create more problems than others. Bright colors like yellow or cyan often need extra adjustment to meet contrast requirements while still feeling visually balanced. That process takes iteration and experience.

First Step

Begin by manually selecting the main colors, usually the 500th shade. These are the most important because they're typically used for default component states and interactive elements.

Validate these directly against the primary surface, usually white in light mode. Dark themes work slightly differently since pure black isn't always the primary surface, so handle those separately within the dark theme system.

Second Step

Once the core 500 shades are validated, use a tool to generate lighter and darker variations. This keeps the palette scalable while maintaining accessibility where it matters most.

Common usage patterns:

• Darker shades for hover, active, and focus states
• Lighter shades for backgrounds, grouping, subtle emphasis, and decorative structure

This gives teams flexibility without losing control over the colors that carry the most accessibility risk.

Start

Begin with the brand color. Verify that it meets a 4.5:1 contrast ratio against the main surface, usually white.

If it fails contrast, create an accessible variant and use that version for readable text and interactive elements. Keep the original brand color for decorative accents, highlights, or marketing usage.

Step 1: Neutral Colors

Define the neutral palette first, usually greys.

Neutrals shape most of the interface and heavily influence readability, hierarchy, borders, backgrounds, and layout structure. A strong neutral system prevents many accessibility issues before they appear.

Make sure the base neutral color (500) should maintain at least a 4.5:1 contrast ratio against the primary surface, usually white.

Step 2: Define the Base Colors

Once the brand and neutral colors are validated, compare them side by side with the other base colors in the system. The palette should feel visually balanced, with colors sharing a similar perceived intensity even if the hues are different.

Adjust the supporting colors carefully around the brand color rather than modifying the brand itself. This helps preserve brand consistency while maintaining accessibility and visual harmony across the palette.

All base colors (500 shades) should meet a 4.5:1 contrast ratio against the main surface.

Step 3: Create The Actual Color Scales (Google Method)

Use a tint and shade generation tool such as: Shadowlord by Noel Delgado or any tool that allows you to generate tints and shades by controlling the percentage balance.

Add the HEX value of the base color (500) and generate tints and shades using 5% intervals.

Select a tint (lighter) every 15% (15%, 30%, 45%, 60% and 75%, after which include the 85%, 90%, and 95% also for the tints. These additional % apply only to tints. For shades (darker), stop at 75%.

Note!

Why 5%? Why 85% / 90% / 95% for lighter shades?

Using 5% generation intervals creates more options and gives better flexibility when refining the palette later. The selected intervals in this system use roughly 15% jumps because they create enough visual separation without overcrowding the scale. This can still be adjusted depending on the product and visual needs.

The additional light tints at 85%, 90%, and 95% are especially useful for:

• subtle backgrounds
• status containers
• contextual messages
• grouping surfaces
• soft highlights

These lighter values become even more useful later when building dark themes because the palette logic reverses.

Avoid creating shades beyond 75%. Extremely dark variations often become visually indistinguishable and add little practical value inside real interfaces.

Step 4: White and Black Colors

White and black variants can be created by reducing opacity in controlled steps. These values are useful for overlays, layering, dividers, shadows, and subtle surface treatments.

From the base color, reduce opacity to: 75%, 65%, 50%, 25%, 15%, 10%, 5%, 2% (adjust if needed).

Step 5: Group Colors into Clear Categories

Group colors based on their purpose to keep the system easier to understand and maintain.

• Primary or Brand Colors
• Functional or Semantic Colors
• Neutral Colors
• White and Black Variants
• Secondary or Accent Colors
• Gradients

Clear grouping improves token organization and helps both designers and engineers apply colors more consistently.

Start

Build the dark theme using the light theme as the reference point. This keeps the system visually connected across themes and makes color behavior more predictable.

On Light Theme We Have The Following:

• The main surface is usually white: ◯ White 500 → Color Tokens / Surface / Primary Surface
• The page background is usually a very light neutral: ⬤ Grey 50 → Color Tokens / Surface / Page Surface

On Dark Theme

1. The main surface becomes the primary black used in the light theme:. Black 500
2. To find the page color, we first need to determine the correct neutral grey.
3. Take the 300th or 400th grey tint from the light theme and test it against the Black 500th from the light theme.
4. Check which grey shade reaches a 4.5:1 contrast ratio against that black.
5. The grey that meets this contrast becomes the main Grey (500th) in the dark theme.
6. From this Grey 500, generate the rest of the grey scale, similar to the light theme, but reverse the order. (Meaning that you need to add the "extra shades" at 80% 90% and 95% instead of doing it to the tints).
7. The 50th shade becomes the page background color in the dark theme.

Here is an example bellow:

Step 1: Create the main grey scale for dark mode

Take the new Grey 500 and generate the rest of the scale using a tint and shade tool such as: Shadowlord by Noel Delgado

1. Add the color hex and generate tints and shades using 5% intervals.
2. Select the tints (lighter) at 15%, 30%, 45%, 60%, and 75%. (Stop at 75%. It's basically the reversed version of light theme)
3. For the shades (darker), also select also the extra 85%, 90%, and 95%. (Reversed version of light theme)

From the shades generated, select the 25th shade as the page background color in the dark theme.

How To Define the Base Colors On Dark Theme

If a light theme already exists, defining dark theme colors becomes much easier because the relationships between colors are already established.

1. Take the 300th or 400th shade of each color from the light theme and test it against the main dark surface: Black 500
2. Check which shade maintains the correct contrast while still feeling visually balanced inside the interface.
3. Once identified, that shade becomes the new: 500th base color for the dark theme.
4. This new 500 then becomes the reference point for generating the remaining dark theme scale.

Step 2: Create The Color Scale

Just like on the light theme, take the new base colors and go to Shadowlord by Noel Delgado or any tool that allows you to generate shades by controlling the percentage balance.

Add the HEX value of a base color (500) and generate tints and shades by using a 5% interval. Select a shade (darker) every 15% (15%, 30%, 45%, 60% and 75% then also include 80%, 90%, and 95%. These additional steps apply only to shades now. For tints, stop at 75%.

Similar to light theme, use a numeric color scale. Numbers like 50, 100, 200, 300, 400, 500, 600, 700, 800, and 900 indicate how light or dark a color is.

On dark mode the order is reversed:

• Lower number = darker.
• Higher number = lighter.
• Usually 500th is the main color.

Step 3: White and Black Colors

White and Black variations can be derived from the base color by reducing opacity in controlled steps. This creates softer overlays and layered effects while keeping the system consistent.

From the base color, reduce opacity to:

75%, 65%, 50%, 25%, 15%, 10%, 5%, 2% (adjust if needed).

Step 4: Group Colors into Clear Categories

Similar to the light theme, and to simplify token creation later, group colors by purpose:

• Primary or Brand Colors
• Functional or Semantic Colors
• Neutral Colors
• White and Black Variants
• Secondary or Accent Colors
• Gradients

Clear grouping makes the system easier to scale and easier for both designers and engineers to use correctly.