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
The category type in Spanish or English (e.g., "sustantivo", "noun", "verbo", "verb").
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
The category string to validate.
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 Color | Contrast Ratio | WCAG Level |
|---|
| sustantivo | noun | #047857 | 5.48:1 | AA |
| verbo | verb | #1e40af | 8.72:1 | AAA |
| adjetivo | adjective | #b45309 | 5.02:1 | AA |
| adverbio | adverb | #6d28d9 | 7.10:1 | AAA |
| expresion | expression | #be185d | 6.04:1 | AA |
| interjección | interjection | #dc2626 | 4.83:1 | AA |
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
---
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
---
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.
<span style={`background: ${color}`}>
{category} <!-- Text label included -->
</span>