Farben Konzept
- Web Content Accessibility Guidelines (WCAG) compliance
- What is WCAG?
- The 60-30-10 rule is a timeless design principle that creates balanced, professional color schemes. It divides your design into three color proportions:
- 60% Dominant Color - Your foundation. Used for main backgrounds and large surfaces. Should be neutral and easy on the eyes.
- 30% Secondary Color - Your structure. Used for navigation, headers, and defining layout hierarchy. Provides contrast.
- 10% Accent Color - Your action driver. Used sparingly for buttons, links, and important elements. Draws attention.
- Main backgrounds, content areas, cards, and page sections
- Creates visual calm and doesn't compete with your content. This color should be subtle and easy on the eyes.
- Website background
- Content section backgrounds
- Card backgrounds
- Mobile app main screens
- Email newsletter backgrounds
- Navigation, headers, footers, sidebars and borders
- Provides contrast and defines your layout structure. This color creates hierarchy and guides user attention.
- Navigation bars
- Section headers
- Footer backgrounds
- Sidebar backgrounds
- Main text color on light backgrounds
- Buttons, links, highlights, and important elements
- Draws attention to what you want users to click or notice. This color should stand out and create urgency.
- Call-to-action buttons
- Important links
- Form submit buttons
- Notification badges
- Active states