Skip to main content

Category Colors Utility

The categoryColors utility provides type-safe, WCAG AA-compliant color mappings for word categories in both Spanish and English.

Import

import { 
  getCategoryColor, 
  isValidCategory, 
  getAllCategoryColors 
} from '@/utils/categoryColors';

Functions

getCategoryColor

Returns the hex color code for a given category type.
function getCategoryColor(category: string): string
category
string
required
The category type in Spanish or English (e.g., "sustantivo", "noun", "verbo", "verb").
color
string
Hex color code for the category. Defaults to verb/verbo blue (#1e40af) if the category is not recognized.

Examples

import { getCategoryColor } from '@/utils/categoryColors';

const color1 = getCategoryColor("sustantivo");  // "#047857" (green)
const color2 = getCategoryColor("noun");        // "#047857" (same green)
const color3 = getCategoryColor("verbo");       // "#1e40af" (blue)
const color4 = getCategoryColor("invalid");     // "#1e40af" (default)

isValidCategory

Validates whether a string is a recognized category type.
function isValidCategory(category: string): category is CategoryType
category
string
required
The category string to validate.
isValid
boolean
true if the category is recognized, false otherwise. This is a TypeScript type guard that narrows the type to CategoryType.

Examples

import { isValidCategory } from '@/utils/categoryColors';

isValidCategory("sustantivo");    // true
isValidCategory("verb");          // true
isValidCategory("invalid");       // false

// TypeScript type narrowing
const category: string = "noun";
if (isValidCategory(category)) {
  // TypeScript now knows category is CategoryType
  const color = getCategoryColor(category);
}

getAllCategoryColors

Returns the complete mapping of all category colors.
function getAllCategoryColors(): Record<CategoryType, string>
colors
Record<CategoryType, string>
Object mapping all category types to their hex color codes.

Examples

import { getAllCategoryColors } from '@/utils/categoryColors';

const allColors = getAllCategoryColors();

// Iterate over all categories
Object.entries(allColors).forEach(([category, color]) => {
  console.log(`${category}: ${color}`);
});

// Use in component
const categories = Object.keys(allColors);

Color Palette

All colors are carefully selected for WCAG AA or AAA compliance when displayed with white text:
Category (Spanish)Category (English)Hex ColorContrast RatioWCAG Level
sustantivonoun#0478575.48:1AA
verboverb#1e40af8.72:1AAA
adjetivoadjective#b453095.02:1AA
adverbioadverb#6d28d97.10:1AAA
expresionexpression#be185d6.04:1AA
interjeccióninterjection#dc26264.83:1AA
The minimum WCAG AA standard requires a contrast ratio of 4.5:1 for normal text. All colors in this palette meet or exceed this requirement.

Usage in Components

WordCard Badge

WordCard.astro
---
import { getCategoryColor } from '@/utils/categoryColors';

interface Props {
  word: string;
  category: string;
}

const { word, category } = Astro.props;
const badgeColor = getCategoryColor(category);
---

<div class="word-card">
  <h3>{word}</h3>
  <span 
    class="category-badge" 
    style={`background-color: ${badgeColor};`}
  >
    {category}
  </span>
</div>

<style>
  .category-badge {
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
  }
</style>

Category Filter

CategoryFilter.astro
---
import { getAllCategoryColors } from '@/utils/categoryColors';

const categoryColors = getAllCategoryColors();
const spanishCategories = [
  "sustantivo", "verbo", "adjetivo", 
  "adverbio", "expresion", "interjección"
];
---

<div class="category-filters">
  {spanishCategories.map(category => (
    <button 
      class="category-button"
      data-category={category}
      style={`border-color: ${categoryColors[category as keyof typeof categoryColors]};`}
    >
      {category}
    </button>
  ))}
</div>

Dynamic Styling

import { getCategoryColor } from '@/utils/categoryColors';

// Apply color dynamically in client-side script
const badges = document.querySelectorAll('[data-category]');
badges.forEach(badge => {
  const category = badge.getAttribute('data-category');
  if (category) {
    const color = getCategoryColor(category);
    badge.style.backgroundColor = color;
  }
});

TypeScript Types

type CategoryType =
  | "sustantivo"
  | "noun"
  | "verbo"
  | "verb"
  | "adjetivo"
  | "adjective"
  | "adverbio"
  | "adverb"
  | "expresion"
  | "expression"
  | "interjección"
  | "interjection";
The utility provides full TypeScript support with type-safe category strings and return values.

Default Behavior

If an invalid or unknown category is passed to getCategoryColor, it returns the verb/verbo blue (#1e40af) as a safe default:
getCategoryColor("unknown");  // "#1e40af"
getCategoryColor("");         // "#1e40af"
getCategoryColor(null);       // "#1e40af"
This ensures the UI never breaks due to missing or malformed category data.

Accessibility Considerations

Contrast Ratios

All colors provide sufficient contrast with white text, meeting WCAG AA standards at minimum. Six colors meet AAA standards (7:1 or higher).

Color Blindness

The color palette is designed to be distinguishable for users with common types of color blindness:
  • Deuteranopia (red-green): High distinction between all colors
  • Protanopia (red-green): High distinction between all colors
  • Tritanopia (blue-yellow): Adequate distinction for most pairs

Not Color Alone

Do not rely solely on color to convey category information. Always include the category name as text alongside or within the colored badge.
Good Example
<span style={`background: ${color}`}>
  {category}  <!-- Text label included -->
</span>

Build docs developers (and LLMs) love