Poor contrast:
Light gray text on white background
color: #999; background: #fafafa;
Color Accessibility Guidelines
- Ensure a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text
- Don't rely solely on color to convey information (use patterns, icons, or text)
- Test your color combinations with accessibility tools
- Consider color blindness when choosing color palettes
- Use the Web Content Accessibility Guidelines (WCAG) as a reference
Performance Considerations
Complex backgrounds can impact performance, so consider these best practices:
- Use CSS gradients instead of image gradients when possible
- Minimize the use of multiple backgrounds on elements that appear frequently
- Be cautious with large fixed backgrounds, as they can cause scrolling jank
- Consider using CSS sprites for multiple background images
- Use SVG for vector graphics and patterns, as they scale well and are compact
- Be mindful of alpha transparency, as it requires more processing
Real-World Performance Example
Instead of using a repeating background image:
/* Using image (requires HTTP request, larger file size) */
.pattern {
background-image: url('pattern.jpg');
background-repeat: repeat;
}
/* Using CSS (no HTTP request, efficiently rendered) */
.pattern {
background-image:
radial-gradient(circle at 1px 1px, #333 1px, transparent 0);
background-size: 10px 10px;
}
Practice Exercises
Exercise 1: Color Palette Creation
Create a harmonious color palette for a website with:
- A primary color
- A secondary color
- An accent color
- Background colors (light and dark variants)
- Text colors that provide sufficient contrast
Define your palette using CSS variables and provide sample applications.
Exercise 2: Gradient Button
Create a button with:
- A linear gradient background
- A subtle hover effect
- Appropriate text contrast
- A shadow for depth
- Rounded corners and padding
Exercise 3: Background Pattern
Create a repeating background pattern using CSS gradients (no images). Examples:
- Stripes
- Checkerboard
- Polka dots
- Grid lines
- Zigzag pattern
Exercise 4: Layered Background
Create a layered background for a hero section that includes:
- A base gradient
- A translucent pattern overlay
- A positioning for text content that ensures readability
- Responsive behavior (background works on different screen sizes)
Resources and Tools
Color Selection Tools
Gradient Tools
Accessibility Tools
Further Reading
Summary
In this lecture, we explored:
- Various CSS color formats (named colors, hex, RGB/RGBA, HSL/HSLA, and modern formats)
- Color properties for text, backgrounds, borders, and effects
- Color theory fundamentals for creating harmonious designs
- Background properties including background-color, background-image, background-repeat, background-position, background-size, and background-attachment
- Different types of gradients: linear, radial, conic, and repeating
- Advanced techniques like multiple backgrounds, blend modes, and background-clip
- Practical applications, performance considerations, and accessibility guidelines
These concepts provide the foundation for creating visually appealing, accessible, and performant web designs that go beyond basic styling.
In the next lecture, we'll explore the Box Model in Depth, which will help you understand how elements are sized and spaced in CSS.