`).join('');
}
renderAccessibilityAnalysis() {
this.dom.accessibilityContainer.innerHTML = this.state.palettes.map(p => {
const combinations = [
{ name: 'Text on Background', fg: p.colors.text, bg: p.colors.background },
{ name: 'Link on Background', fg: p.colors.primary, bg: p.colors.background },
{ name: 'Primary Button', fg: this.getReadableTextColor(p.colors.primary), bg: p.colors.primary },
{ name: 'Accent Button', fg: this.getReadableTextColor(p.colors.accent), bg: p.colors.accent },
];
return `
${p.name} - Contrast Ratios
| Combination | Preview | Ratio | Normal Text (AA) | Large Text (AA) |
|---|
${combinations.map(c => {
const ratio = this.calculateContrastRatio(c.fg, c.bg);
return `
| ${c.name} |
Aa |
${ratio.toFixed(2)}:1 |
${ratio >= 4.5 ? 'Pass' : 'Fail'} |
${ratio >= 3 ? 'Pass' : 'Fail'} |
`
}).join('')}
`;
}).join('');
}
// --- Calculations & Utilities ---
getReadableTextColor(bgHex) {
return this.calculateContrastRatio(bgHex, '#ffffff') >= 4.5 ? '#ffffff' : '#000000';
}
calculateContrastRatio(hex1, hex2) {
const lum1 = this.getLuminance(hex1);
const lum2 = this.getLuminance(hex2);
const lighter = Math.max(lum1, lum2);
const darker = Math.min(lum1, lum2);
return (lighter + 0.05) / (darker + 0.05);
}
getLuminance(hex) {
const rgb = parseInt(hex.substring(1), 16);
const r = (rgb >> 16) & 0xff;
const g = (rgb >> 8) & 0xff;
const b = (rgb >> 0) & 0xff;
const a = [r, g, b].map(v => {
v /= 255;
return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
});
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}
// --- PDF & Navigation ---
openTab(event, tabName) { this.state.activeTab = tabName; this.updateUI(); }
navigateTabs(dir) {
const i = this.TABS_ORDER.indexOf(this.state.activeTab);
let n = i;
if (dir === 'next' && i < this.TABS_ORDER.length - 1) n++;
if (dir === 'prev' && i > 0) n--;
this.openTab(null, this.TABS_ORDER[n]);
}
async generatePdf() {
if(this.state.activeTab !== 'dashboard') {
this.openTab(null, 'dashboard');
await new Promise(res => setTimeout(res, 50));
}
this.dom.downloadPdfBtn.disabled = true; this.dom.downloadPdfBtn.textContent = 'Generating...';
this.dom.container.classList.add('pdf-export-mode');
try {
const { jsPDF } = window.jspdf;
const canvas = await html2canvas(this.dom.pdfOutput, { scale: 2, useCORS: true, backgroundColor: '#ffffff' });
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' });
const margin = 40;
const pdfWidth = pdf.internal.pageSize.getWidth();
const imgWidth = pdfWidth - margin * 2;
const imgHeight = canvas.height * imgWidth / canvas.width;
pdf.addImage(imgData, 'PNG', margin, margin, imgWidth, imgHeight);
pdf.save(`Color_Palette_Performance.pdf`);
} catch(e) {
console.error(e); alert('Error generating PDF.');
} finally {
this.dom.container.classList.remove('pdf-export-mode');
this.dom.downloadPdfBtn.disabled = false; this.dom.downloadPdfBtn.textContent = 'Download Dashboard as PDF';
}
}
}
const app = new ColorPaletteDashboard();
