/** * Colorblind mode styles * Universal design for all types of color vision deficiencies: * - Deuteranopia (most common, red-green) * - Protanopia (red-green, different from deuteranopia) * - Tritanopia (blue-yellow) * - Achromatopsia (complete color blindness) */ /* * General colorblind mode styles * Apply these when has the colorblind class */ html.colorblind .tag { /* Increase contrast for all tags */ text-shadow: 0 0 1px rgba(0,0,0,0.8); font-weight: 700; border: 1px solid rgba(0,0,0,0.3); } /* * Universal colorblind palette * These colors are chosen to be distinguishable across all types of color blindness * Combined with unique shapes and patterns for maximum differentiation */ html.colorblind .tag.algebra { background: #0072B2; /* Deep blue - distinguishable in all types */ color: white; border-radius: 16px 16px 16px 16px; } html.colorblind .tag.quadratic { background: #E69F00; /* Orange - safe for deuteranopia and protanopia */ color: black; border-radius: 4px; } html.colorblind .tag.parabolic { background: #009E73; /* Teal - works for most types */ color: white; border-radius: 16px 4px 16px 4px; } html.colorblind .tag.discriminant { background: #CC79A7; /* Pink/purple - distinctive across types */ color: white; border-radius: 16px 16px 4px 4px; } html.colorblind .tag.vertex { background: #F0E442; /* Yellow - high luminance value */ color: black; /* Better contrast with yellow background */ border-radius: 4px 4px 16px 16px; } html.colorblind .tag.graphing { background: #56B4E9; /* Sky blue - high contrast with other colors */ color: black; border-radius: 4px 16px 4px 16px; } /* Add pattern distinguishers to further help identification */ html.colorblind .tag.algebra::before { content: "●"; margin-right: 5px; } html.colorblind .tag.quadratic::before { content: "■"; margin-right: 5px; } html.colorblind .tag.parabolic::before { content: "▲"; margin-right: 5px; } html.colorblind .tag.discriminant::before { content: "✦"; margin-right: 5px; } html.colorblind .tag.vertex::before { content: "◆"; margin-right: 5px; } html.colorblind .tag.graphing::before { content: "✓"; margin-right: 5px; } /* Add pattern-based backgrounds for additional differentiation */ html.colorblind .tag.algebra { background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); background-size: 10px 10px; } html.colorblind .tag.quadratic { background-image: linear-gradient(to right, rgba(0,0,0,0.1) 1px, transparent 1px); background-size: 4px 100%; } html.colorblind .tag.parabolic { background-image: linear-gradient(to bottom, rgba(255,255,255,0.15) 1px, transparent 1px); background-size: 100% 4px; } html.colorblind .tag.discriminant { background-image: radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px); background-size: 8px 8px; } html.colorblind .tag.vertex { 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: 10px 10px; } html.colorblind .tag.graphing { 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: 10px 10px; } /* * High Contrast Mode styles * Provide a clear black and white alternative for achromatopsia (complete color blindness) */ html.highcontrast .tag { border: 2px solid black; text-shadow: none; font-weight: bold; } html.highcontrast .tag.algebra { background: black; color: white; } html.highcontrast .tag.quadratic { background: white; color: black; } html.highcontrast .tag.parabolic { background: black; color: white; border-style: dashed; } html.highcontrast .tag.discriminant { background: white; color: black; border-style: dashed; } html.highcontrast .tag.vertex { background: black; color: white; border-style: dotted; } html.highcontrast .tag.graphing { background: white; color: black; border-style: dotted; } /* Add focus styles for keyboard navigation */ .tag:focus { outline: 2px solid #007bff; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); } /* For future extension to other UI elements */ html.colorblind button.primary-btn, html.colorblind a.primary-btn { background-color: #0072B2; /* Deep blue */ } html.colorblind button.secondary-btn, html.colorblind a.secondary-btn { background-color: #E69F00; /* Orange */ } html.colorblind .progress-bar { background-color: #0072B2; /* Deep blue */ } /* Dark mode adjustments for colorblind mode */ html.dark.colorblind .tag { box-shadow: 0 1px 3px rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3); } html.dark.colorblind .tag.quadratic, html.dark.colorblind .tag.vertex, html.dark.colorblind .tag.graphing { color: black; /* Keep dark text on light backgrounds even in dark mode */ } /* High contrast mode styles (for consistency with existing settings implementation) */ html.high-contrast { filter: contrast(150%); } html.high-contrast img:not(.exempt-contrast) { filter: contrast(120%); }