Μετάβαση στο περιεχόμενο
Ξεκίνα

Έλεγχος αντίθεσης χρωμάτων

Το Do4U ελέγχει την αντίθεση των χρωμάτων της επωνυμίας και του ιστότοπού σου. Γράφεις τα χρώματά σου, ένα ανά γραμμή, και λες για τι χρησιμεύει το καθένα: κείμενο, φόντο, έμφαση (για παράδειγμα ένα κουμπί) ή περίγραμμα. Ο κώδικας υπολογίζει τον λόγο αντίθεσης κάθε ζεύγους με τον τύπο του WCAG και δείχνει ποια επίπεδα επιτυγχάνει: AA και AAA για κανονικό και μεγάλο κείμενο και 3:1 για περιγράμματα, εικονίδια και επιφάνειες κουμπιών. Οι τιμές δεν στρογγυλοποιούνται προς τα πάνω. Για κάθε ζεύγος που αποτυγχάνει παίρνεις το πλησιέστερο χρώμα που περνά, μία φορά πιο σκούρο και μία πιο ανοιχτό, στην ίδια απόχρωση. Το Do4U φτιάχνει επίσης μια προσαρμοσμένη παλέτα και την ελέγχει ξανά ως σύνολο. Εξάγεις την παλέτα ως CSS custom properties, μεταβλητές SCSS ή JSON και η εξαγωγή γίνεται στο πρόγραμμα περιήγησής σου. Όλα γίνονται με κώδικα, χωρίς ΤΝ, και δωρεάν.

Δοκίμασέ το τώρα Τιμές

Δωρεάν και χωρίς λογαριασμό: Υπολογιστής λόγου αντίθεσης →

Για ποιον είναι

Για σχεδιαστές, προγραμματιστές, γραφεία και ιδιοκτήτες ιστότοπων που επιλέγουν χρώματα επωνυμίας ή φτιάχνουν οδηγό ύφους και θέλουν κείμενα και κουμπιά που μπορούν να διαβάσουν όλοι.

Τυπικές χρήσεις

  • Έλεγξε μια νέα παλέτα επωνυμίας πριν ξεκινήσει ο σχεδιασμός
  • Βρες ένα γκρι για δευτερεύον κείμενο που εξακολουθεί να περνά το AA
  • Έλεγξε τα χρώματα κουμπιών, συνδέσμων και περιγραμμάτων σε σχέση με το φόντο της σελίδας
  • Εξάγαγε τα προσαρμοσμένα χρώματα ως μεταβλητές CSS για το φύλλο στυλ σου

Παράδειγμα

Είσοδος

#1a1a1a κείμενο #777777 κείμενο Δευτερεύον #ffffff φόντο #cccccc περίγραμμα

Αποτέλεσμα

#1a1a1a σε #ffffff: 17.4:1, περνά AA και AAA #777777 σε #ffffff: 4.47:1, αποτυγχάνει στο AA για κανονικό κείμενο (περνά για μεγάλο κείμενο). Πιο σκούρο: #767676 → 4.54:1. Πιο ανοιχτό: δεν είναι δυνατό #cccccc σε #ffffff: 1.6:1, αποτυγχάνει στην αντίθεση μη κειμενικών στοιχείων 3:1. Πιο σκούρο: #949494 → 3.03:1 Εξαγωγή (προσαρμοσμένη): :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

Ένα σταθερό παράδειγμα, συντομευμένο. Τα πραγματικά αποτελέσματα δημιουργούνται από AI: έλεγξέ τα.

Τιμή και όρια

Τιμή
δωρεάν, έως 30 έλεγχοι την ημέρα
Διαθέσιμο με
Free, Με πακέτο
Όριο εισόδου
Έως 3 000 χαρακτήρες ανά αρχείο

Απόρρητο

Επεξεργασία στους δικούς μας διακομιστές στην ΕΕ (Πολωνία). Οι είσοδοι και τα αποτελέσματα διαγράφονται μετά από 7 ημέρες (Free) ή 30 ημέρες (πακέτα), ή αμέσως αφού δεις το αποτέλεσμα αν επιλέξεις να μην αποθηκευτούν. Οι εικόνες διαγράφονται αμέσως μετά την επεξεργασία.

Στο API

Όνομα εργαλείου: contrast_check. Δημιούργησε μια εργασία με POST /api/v1/jobs και πάρε το αποτέλεσμα με GET /api/v1/jobs/{id}. Το κλειδί API σου θα το βρεις στον λογαριασμό σου.

curl -X POST https://do4u.eu/api/v1/jobs \
  -H "Authorization: Bearer d4u_…" -H "Content-Type: application/json" \
  -d '{"tool": "contrast_check", "colors": ["#1a1a1a text", "#ffffff background", "#0066cc accent"]}'

Πλήρης τεκμηρίωση API →

Ερωτήσεις και απαντήσεις

Πώς υπολογίζεται ο λόγος αντίθεσης;

Με τον τύπο του WCAG 2.2: πρώτα η σχετική φωτεινότητα κάθε χρώματος, έπειτα (L1 + 0.05) / (L2 + 0.05), όπου L1 είναι το πιο ανοιχτό χρώμα. Το αποτέλεσμα είναι μεταξύ 1:1 και 21:1. Οι τιμές συγκρίνονται χωρίς στρογγυλοποίηση, οπότε το 4.49:1 δεν φτάνει το 4.5:1, και η εμφάνιση δεν στρογγυλοποιεί ποτέ προς τα πάνω.

Ποια ζεύγη ελέγχονται;

Το κείμενο ελέγχεται σε κάθε φόντο και στα χρώματα έμφασης, με όριο 4.5:1 και 7:1 για κανονικό κείμενο και 3:1 και 4.5:1 για μεγάλο κείμενο. Τα χρώματα έμφασης και περιγράμματος ελέγχονται στο φόντο με όριο 3:1 για αντίθεση μη κειμενικών στοιχείων. Ένα χρώμα χωρίς ρόλο συγκρίνεται με όλα τα άλλα χρώματα.

Πώς βρίσκονται τα προτεινόμενα χρώματα;

Αλλάζει μόνο η φωτεινότητα, στον χρωματικό χώρο OKLCH· η απόχρωση μένει ίδια. Το Do4U ψάχνει το πλησιέστερο χρώμα που περνά, μία φορά πιο σκούρο και μία πιο ανοιχτό, και το ελέγχει ξανά ως κωδικό hex. Αν κανένα χρώμα δεν μπορεί να περάσει σε ένα φόντο, το λέει.

Αποθηκεύεται το κείμενό μου;

Μόνο για όσο χρειάζεται: 7 ημέρες στο Free, 30 ημέρες με πακέτο – ή καθόλου, αν επιλέξεις να μην αποθηκεύεται. Η επεξεργασία γίνεται στους δικούς μας διακομιστές στην ΕΕ (Πολωνία).

Μπορώ να χρησιμοποιήσω το αποτέλεσμα αμέσως;

Τα αποτελέσματα δημιουργούνται από AI. Διάβασέ τα πριν τα δημοσιεύσεις ή τα στείλεις.

Σχετικά εργαλεία

  • Έλεγχος προσβασιμότητας

    Ελέγχει μια σελίδα για συνηθισμένα εμπόδια και εξηγεί πώς να τα διορθώσεις.

  • Σχόλια σχεδίασης από στιγμιότυπο οθόνης

    Ανέβασε ένα στιγμιότυπο οθόνης μιας σελίδας ή εφαρμογής και πάρε αριθμημένα, συγκεκριμένα ευρήματα για το μέγεθος κουμπιών, την αντίθεση, το κείμενο σε εικόνες, την ιεραρχία και τα κενά, το καθένα με πλαίσιο στην εικόνα. Αξιολόγηση από ΤΝ, όχι μέτρηση.

  • Εναλλακτικά κείμενα

    Σύντομες περιγραφές εικόνων για αναγνώστες οθόνης και μηχανές αναζήτησης.

Όλα τα εργαλεία →