diff --git a/app/js/filters/ctxcls.js b/app/js/filters/ctxcls.js
new file mode 100644
index 00000000..de84a147
--- /dev/null
+++ b/app/js/filters/ctxcls.js
@@ -0,0 +1,17 @@
+'use strict';
+
+var filtersModule = require('./_index.js');
+
+/**
+ * @ngInject
+ */
+function ctxcls($filter) {
+  return function(input) {
+    return input > 0.15 ? 'danger'
+         : input > 0.08 ? 'warning'
+         : input > 0 ? 'info'
+         : 'success';
+  };
+}
+
+filtersModule.filter('ctxcls', ctxcls);
diff --git a/app/views/grouped-runs.html b/app/views/grouped-runs.html
index 66d88491..646cd006 100644
--- a/app/views/grouped-runs.html
+++ b/app/views/grouped-runs.html
@@ -92,7 +92,7 @@
                     </thead>
                     <tbody>
                         <tr table-ref="table" ng-repeat="job in table.dataSorted | filter:{name:groupedRuns.searchJob}"
-                         ng-class="job.failuresRate > 15 ? 'danger' : job.failuresRate > 8 ? 'warning' : job.failuresRate > 0 ? 'info' : 'success'">
+                         ng-class="job.failuresRate / 100 | ctxcls">
                             <td><a ui-sref="job({ jobName: job.name })">{{ job.name }}</a></td>
                             <td>{{ job.passes }}</td>
                             <td>{{ job.failures }}</td>
diff --git a/app/views/home.html b/app/views/home.html
index 3cbf3444..ea779e65 100644
--- a/app/views/home.html
+++ b/app/views/home.html
@@ -104,7 +104,7 @@
                     </thead>
                     <tbody>
                         <tr table-ref="table" ng-repeat="p in home.projects | filter:{name:home.searchProject}"
-                         ng-class="p.failRate > 0.15 ? 'danger' : p.failRate > 0.08 ? 'warning' : p.failRate > 0 ? 'info' : 'success'">
+                         ng-class="p.failRate | ctxcls">
                             <td class="text-right">{{$index+1}}</td>
                             <td class="text-left">
                               <a ui-sref="groupedRuns({ runMetadataKey: home.groupKey, name: p.name })">{{p.name}}</a>
diff --git a/app/views/job.html b/app/views/job.html
index 423dcadd..92997f35 100644
--- a/app/views/job.html
+++ b/app/views/job.html
@@ -94,7 +94,7 @@
                         </thead>
                         <tbody>
                             <tr table-ref="table" ng-repeat="test in table.dataSorted | filter:{name:job.searchTest}"
-                             ng-class="test.failuresRate > 15 ? 'danger' : test.failuresRate > 8 ? 'warning' : test.failuresRate > 0 ? 'info' : 'success'">
+                             ng-class="test.failuresRate / 100 | ctxcls">
                               <td><a ui-sref="test({ testId: test.name })">{{ test.name|limitTo:110 }}</a></td>
                                 <td>{{ test.passes|number }}</td>
                                 <td>{{ test.failures|number }}</td>
diff --git a/app/views/tests-detail.html b/app/views/tests-detail.html
index b2877fa7..1e75418c 100644
--- a/app/views/tests-detail.html
+++ b/app/views/tests-detail.html
@@ -54,7 +54,7 @@
                                 <tbody>
                                     <tr table-ref="table"
                                      ng-repeat="test in table.dataSorted | filter:{test_id:testsDetail.searchTest}"
-                                     ng-class="test.failureAverage > 0.15 ? 'danger' : test.failureAverage > 0.8 ? 'warning' : test.failureAverage > 0 ? 'info' : 'success'">
+                                     ng-class="test.failureAverage | ctxcls">
                                         <td class="text-left">
                                           <a ui-sref="test({ testId: test.test_id })"> {{test.test_id | limitTo: 110}}</a>
                                         </td>
diff --git a/test/unit/filters/ctxcls_spec.js b/test/unit/filters/ctxcls_spec.js
new file mode 100644
index 00000000..3f20961f
--- /dev/null
+++ b/test/unit/filters/ctxcls_spec.js
@@ -0,0 +1,41 @@
+describe('Ctxcls Filter', function() {
+
+  var ctxclsFilter;
+
+  beforeEach(function() {
+    module('app');
+    module('app.filters');
+  });
+
+  beforeEach(inject(function(_ctxclsFilter_) {
+    ctxclsFilter = _ctxclsFilter_;
+  }));
+
+  it('should return an error context class', function() {
+    expect(ctxclsFilter(1)).toBe('danger');
+  });
+
+  it('should return an error context class', function() {
+    expect(ctxclsFilter(0.151)).toBe('danger');
+  });
+
+  it('should return an waring context class', function() {
+    expect(ctxclsFilter(0.15)).toBe('warning');
+  });
+
+  it('should return an waring context class', function() {
+    expect(ctxclsFilter(0.081)).toBe('warning');
+  });
+
+  it('should return an info context class', function() {
+    expect(ctxclsFilter(0.08)).toBe('info');
+  });
+
+  it('should return an info context class', function() {
+    expect(ctxclsFilter(0.01)).toBe('info');
+  });
+
+  it('should return an success context class', function() {
+    expect(ctxclsFilter(0)).toBe('success');
+  });
+});