The setting of text color and background color

Text Color and Background Color Settings

The proper combination of text color and background color directly affects the readability and visual appeal of a webpage. CSS provides various methods to control these two aspects, from basic color value definitions to advanced transparency control. Developers need to apply these techniques flexibly based on actual scenarios.

Basic Color Definition Methods

CSS primarily defines colors in the following ways:

1. Color Keywords: CSS predefines over 140 color names.

p {
  color: red;
  background-color: black;
}

2. Hexadecimal Notation: The most commonly used color representation.

h1 {
  color: #FF0000; /* Red */
  background-color: #00FF00; /* Green */
}

3. RGB/RGBA Notation: Supports transparency control.

div {
  color: rgb(255, 0, 0);
  background-color: rgba(0, 255, 0, 0.5); /* Green with 50% transparency */
}

4. HSL/HSLA Notation: A color model more aligned with human intuition.

span {
  color: hsl(120, 100%, 50%); /* Pure green */
  background-color: hsla(240, 100%, 50%, 0.3); /* Blue with 30% transparency */
}

Detailed Explanation of Text Color Properties

The color property controls the color of text within an element, and its inheritance allows color settings to be efficiently applied across the entire document structure.

Typical Use Cases:

/* Global text color settings */
body {
  color: #333; /* Dark gray as the primary text color */
}

/* Link color settings */
a {
  color: #0066cc;
}

a:hover {
  color: #004499; /* Darker on hover */
}

/* Special text emphasis */
.important {
  color: #d9534f; /* Warning red */
}

Dynamic Color Change Example:

/* Toggle text color based on class */
.text-primary { color: #007bff; }
.text-success { color: #28a745; }
.text-danger { color: #dc3545; }

/* Dark mode adaptation */
@media (prefers-color-scheme: dark) {
  body {
    color: #f8f9fa;
    background-color: #212529;
  }
}

Detailed Explanation of Background Color Properties

The background-color property defines the background color of an element, with a default value of transparent.

Practical Tips:

/* Basic background settings */
.header {
  background-color: #343a40; /* Dark gray background */
  color: white; /* Ensure text readability */
}

/* Gradient background implementation */
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Striped background effect */
.striped {
  background-color: #f8f9fa;
  background-image: linear-gradient(
    45deg,
    rgba(0,0,0,0.1) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0,0,0,0.1) 50%,
    rgba(0,0,0,0.1) 75%,
    transparent 75%,
    transparent
  );
  background-size: 20px 20px;
}

Color Contrast and Accessibility

The WCAG 2.1 standard requires a minimum contrast ratio of 4.5:1 (AA level) between text and background, with large text relaxed to 3:1.

Contrast Check Example:

/* Manage color schemes with CSS variables */
:root {
  --primary-text: #212529;
  --primary-bg: #f8f9fa;
  --secondary-text: #495057;
  --secondary-bg: #e9ecef;
}

/* Ensure sufficient contrast */
.content {
  color: var(--primary-text);
  background-color: var(--primary-bg);
}

/* Low-contrast warning */
.warning {
  color: #6c757d;
  background-color: #e9ecef;
  /* Contrast ratio of only 3.02:1, failing AA standard */
}

Improved Solution:

.warning-improved {
  color: #495057; /* Darken text color */
  background-color: #e9ecef;
  /* Contrast ratio improved to 4.68:1, meeting the standard */
}

Advanced Application Techniques

1. Dynamic Color Calculation

/* Use CSS calc() to adjust colors */
.dynamic-color {
  color: rgb(calc(255 - var(--r)), calc(255 - var(--g)), calc(255 - var(--b)));
}

/* Use CSS variables for theme switching */
:root {
  --theme-primary: #4e73df;
  --theme-secondary: #1cc88a;
}

.dark-mode {
  --theme-primary: #2e59d9;
  --theme-secondary: #17a673;
}

2. Blend Mode Effects

.blend-mode-example {
  background-color: #3498db;
  color: white;
  mix-blend-mode: multiply;
}

/* Blend background image with color */
.hero-section {
  background-image: url('hero-bg.jpg'), linear-gradient(45deg, #2c3e50, #3498db);
  background-blend-mode: overlay;
  color: white;
}

3. Fine-Tuned Transparency Control

/* Semi-transparent text effect */
.translucent-text {
  color: rgba(0, 0, 0, 0.7);
}

/* Gradient transparency */
.gradient-transparency {
  background: linear-gradient(
    to right,
    rgba(255,255,255,1),
    rgba(255,255,255,0)
  );
}

/* Multiple background layers */
.layered-background {
  background: 
    linear-gradient(45deg, rgba(255,0,0,0.3), rgba(0,0,255,0.3)),
    url('pattern.png');
}

Responsive Color Schemes

Adjust color schemes for different devices and user preferences:

/* Adjust based on device characteristics */
@media (max-width: 768px) {
  .mobile-optimized {
    background-color: #f8f9fa;
    color: #212529;
  }
}

/* Print style optimization */
@media print {
  body {
    color: black !important;
    background-color: white !important;
  }
  
  a {
    color: #0000ff;
    text-decoration: underline;
  }
}

/* High-contrast mode support */
@media (-ms-high-contrast: active) {
  button {
    color: windowText;
    background-color: window;
  }
}

Performance Optimization Considerations

Color settings can also impact page rendering performance:

/* Avoid excessive use of rgba() */
.optimized {
  /* Poor: Browser needs to calculate transparency */
  background-color: rgba(0, 0, 0, 0.5);
  
  /* Better: Use semi-transparent PNG or pre-mixed colors */
  background-color: #808080;
}

/* Reduce gradient complexity */
.performant-gradient {
  /* Complex gradients affect performance */
  background: linear-gradient(
    45deg,
    red, orange, yellow, green, blue, indigo, violet
  );
  
  /* Simpler alternative */
  background: linear-gradient(45deg, #4e73df, #224abe);
}

Practical Application Examples

1. Button State Color Management

.btn {
  color: white;
  background-color: #4e73df;
  border: 1px solid #2e59d9;
}

.btn:hover {
  background-color: #2e59d9;
}

.btn:active {
  background-color: #224abe;
}

.btn:disabled {
  color: #858796;
  background-color: #f8f9fa;
  border-color: #d1d3e2;
}

2. Alternating Table Row Colors

.table-striped tbody tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

.table-striped tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

3. Card Shadow and Background Combination

.card {
  background-color: white;
  color: #212529;
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.card-header {
  background-color: #f8f9fc;
  color: #4e73df;
  border-bottom: 1px solid #e3e6f0;
}

Color System Construction

Build a maintainable color system:

/* Base color variables */
:root {
  --blue: #4e73df;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #e74a3b;
  --orange: #fd7e14;
  --yellow: #f6c23e;
  --green: #1cc88a;
  --teal: #20c9a6;
  --cyan: #36b9cc;
  --white: #fff;
  --gray: #858796;
  --gray-dark: #5a5c69;
}

/* Semantic color variables */
:root {
  --primary: var(--blue);
  --secondary: var(--gray);
  --success: var(--green);
  --info: var(--cyan);
  --warning: var(--yellow);
  --danger: var(--red);
  --light: #f8f9fa;
  --dark: #5a5c69;
}

/* Application example */
.alert-success {
  color: darken(var(--success), 10%);
  background-color: lighten(var(--success), 50%);
  border-color: var(--success);
}

Browser Compatibility Handling

Address color display differences across browsers:

/* Provide fallback solutions */
.fallback {
  color: rgb(255, 0, 0); /* Supported by all browsers */
  color: color(display-p3 1 0 0); /* Wide color gamut support */
}

/* Special handling for IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .ie-only {
    background-color: #0078d7;
    color: white;
  }
}

/* Safari gradient rendering optimization */
.safari-gradient {
  background-image: -webkit-linear-gradient(top, #1e5799, #2989d8);
  background-image: linear-gradient(to bottom, #1e5799, #2989d8);
}

Color Debugging Techniques

Validate color schemes during development:

/* Temporary debugging class */
.debug-color * {
  color: white !important;
  background-color: rgba(255, 0, 0, 0.2) !important;
  outline: 1px solid lime !important;
}

/* Focus visibility test */
a:focus {
  outline: 2px dashed #4e73df;
  background-color: rgba(78, 115, 223, 0.1);
}

/* Color blindness simulation aid */
.protanopia-simulation {
  filter: url(#protanopia);
}